3

我对 Angular 完全陌生，我发现做简单的事情对我来说并不那么明显？我有一个使用 ng-repeat 显示的项目列表。一旦单击该范围内的元素，我只想隐藏该元素。我想通过良好的做法以“角度”的方式来做......只是不确定那是什么。

这是html

<div ng-app="myApp">
    <div ng-controller="FruitsCtrl">
        <ul>
            <li ng-repeat="fruit in fruits">
                <p>{{fruit.name}}</p>
                <button ng-click="hideMe()">hide li</button>
            </li>
        </ul>
    </div>
</div>

这是我的js

var myApp = angular.module('myApp', []);

myApp.factory('Fruits', function () {
    var Fruits = [{
        name: "banana"
    }, {
        name: "watermelon"
    }, {
        name: "strawberry"
    }];

    return Fruits;
});


function FruitsCtrl($scope, Fruits) {
    $scope.fruits = Fruits;

    $scope.hideMe = function () {
        alert('hide this li');
    };
}

我在 jsfiddle 上有这个：http: //jsfiddle.net/hS5q8/2/

帮助或方向会很棒！谢谢！！

4

1 回答 1

4

您可以使用ngHide指令。在 Example 添加了一个属性hide，如果该属性为true ， ngHide将隐藏li。

HTML

<li ng-repeat="fruit in fruits" ng-hide="fruit.hide">
    <p>{{fruit.name}}</p>
    <button ng-click="hideMe(fruit)">hide li</button>
</li>

Angularjs 方法

$scope.hideMe = function (fruit) {
    fruit.hide=true;
    alert('hide this li');
};

演示

于 2014-02-07T19:02:32.463 回答