ng-show"呼叫方法n#34;不起作用

时间:2015-03-26 14:54:10

标签: javascript jquery angularjs

我是AngularJs的新手并且通过w3schools教程我创建了我自己的示例,其中ng-show调用方法在ng-click事件后删除元素。

当我点击按钮时,它会调用HidePerson()方法。进一步它多次调用 ShowPerson() 方法,它似乎工作查找,但只要它返回true false元素始终可见。

这是我的代码。



var personCtrl = angular.module('person', []);
personCtrl.controller('personCtrl', function ($scope, $http) {
    $scope.persons = [];
    $scope.personIgnoreList = [];
    $scope.GetPersons = function () {
        $http.get('http://www.w3schools.com/website/Customers_JSON.php')
        .success(function (data, obj1, obj2, obj3) {
            $scope.persons = data;
        })
         .error(function (data, obj1, obj2, obj3) {
             $scope.persons = "Ops... smth went wrong...";
         })
    };

    $scope.ShowPerson = function (person) {
        $($scope.personIgnoreList).each(function (i, p) {
            if (p == person) {
                return false;
            }
        });
        return true;
    }
    $scope.HidePerson = function (person) {
        $scope.personIgnoreList.push(person);
      
    }
});

<div ng-app="person" class="container" ng-controller="personCtrl" ng-init="GetPersons()">
    <div class="row">
        <div  class="col-md-3" ng-repeat="person in persons">
            <div ng-show="ShowPerson(person)">
                <button class="btn btn-lg btn-info"
                        ng-click="HidePerson(person)">
                    {{person.Name}} from {{person.City}} - {{person.Country}}
                </button>
            </div>
        </div>
    </div>
</div>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:3)

使用此代码

$($scope.personIgnoreList).each(function (i, p) {
    if (p == person) {
        return false;
    }
});
return true;

总是返回true,因为从$.each返回与从函数返回不同(它只会打破循环)。

正确的方法是使用这样的东西:

$scope.ShowPerson = function (person) {
    return !$scope.personIgnoreList.some(function(p) {
        return p === person;
    });
}

演示:http://plnkr.co/edit/yGy8x2k25Dkpu6hLj4eu?p=preview

答案 1 :(得分:2)

我不会在angularJS中使用jQuery,在你的情况下没用,你可以像这样更改forEach:

    $scope.ShowPerson = function (person) {
        var show = true;
        angular.forEach($scope.personIgnoreList, function (p, i) {
            if (p == person) {
                show= false;
            }
        });
        return show;
    }

答案 2 :(得分:1)

Array的方法someevery允许您进行这类测试。

$scope.ShowPerson = function (person) {
  return $scope.personIgnoreList.every(function(p) {
           return p != person;
          });
};

对于personIgnoreList some测试中的每个人,如果它不等于person。如果是,则它会中断并返回false

注意:IE 8中无法使用every