AngularJS：如何在 Angular 中隐藏单击的元素？

Question

我对 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/

帮助或指导会很棒！谢谢！！

Answer 1

您可以使用ngHide 指令。在示例中添加了一个属性 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');
};

DEMO