Question

我有一个控制器，它几乎是AngularJS演示的精确副本。我想添加一个函数来从项目中的数组中获取一些项目。

我遇到的问题是结果不会与控制器的主要部分一起过滤。

这是控制器的原始部分。

function EmployerListCtrl($scope, Employer) {
    $scope.employers = Employer.query();
    $scope.orderProp = 'age';
    $scope.getEmployerCount = function () {
        return $scope.employers.length;
    };

我添加了这个功能。

$scope.getSkillsList = function () {
    var employerArray = this.employers;
    var skillsArray = new Array();
    for (var i = 0; i < employerArray.length; i++) {
        if (employerArray[i].software != undefined || employerArray[i].software != null) {
            for (var j = 0; j < employerArray[i].software.length; j++) {
                skillsArray.push(employerArray[i].software[j]);
            }
        }
    }
    return skillsArray;
};

我也尝试使用与控制器主要部分相同的$ scope，但它也只显示初始结果。

$scope.getSkillsList2 = function () {
    var employerArray = $scope.employers;
    var skillsArray = new Array();
    for (var i = 0; i < employerArray.length; i++) {
        if (employerArray[i].software != undefined || employerArray[i].software != null) {
            for (var j = 0; j < employerArray[i].software.length; j++) {
                skillsArray.push(employerArray[i].software[j]);
            }
        }
    }
    return skillsArray;
};

以下是HTML页面的内容。 ng-model =“query”是我用来过滤ng-repeat的。

<div class="container-fluid">
    <p>Set One: {{getSkillsList()}}</p>
    <p>Set Two: {{getSkillsList2()}}</p>
    <div class="row-fluid">
        <div class="span2">
            <!--Sidebar content-->
            Search: <input ng-model="query">
            Sort by:
            <select ng-model="orderProp">
                <option value="name">Alphabetical</option>
                <option value="age">Newest</option>
            </select>
            <p>Number of employers in list: {{getEmployerCount()}}</p>
        </div>
        <div class="span10">
            <!--Body content-->
            <ul class="employers">
                <li ng-repeat="employer in employers | filter:query | orderBy:orderProp" class="thumbnail">
                    <a href="#/employers/{{employer.id}}" class="thumb"><img ng-src="{{employer.imageUrl}}"></a>
                    <a href="#/employers/{{employer.id}}">{{employer.name}}</a>
                    <p>{{employer.snippet}}</p>
                </li>
            </ul>
        </div>
    </div>

</div>

Answer 1

我认为你希望技能阵列能够根据ng-repeat过滤器自动缩小或增长。那不行。在这一行：

<li ng-repeat="employer in employers | filter:query | orderBy:orderProp" ...>

父作用域不会看到过滤器的结果，而只能看到ng-repeat作用域。换句话说，过滤器不会改变$ scope.employers，因此您的技能功能将继续在从服务器接收的完整雇主阵列上运行。

实现目标的一种方法是定义自己的过滤器函数，然后使用查询过滤器链接它：

angular.module('myApp', []).
filter('skills', function() {
   return function(filteredEmployers) {
      var skillsArray = [];
      ... do your filtering here ...
      return skillsArray;
   }
});

然后在你的HTML中：

<li ng-repeat="skills in employers | filter:query | skills">
   {{skill}}
</li>

另见Creating Angular Filters。

$ scope不会在AngularJS中使用控制器的其他部分进行过滤

1 个答案: