Question

我对棱角分明是全新的，我发现做简单的事情对我来说并不那么明显？我有一个使用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 ， ngHide 将隐藏 li ，如果此属性为 true 。

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

AngularJS：如何隐藏角度中的单击元素？

1 个答案: