0

我有一个控制器，它几乎是 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>
4

1 回答 1

1

我认为您希望 SkillArray 基于 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>

另请参阅创建 Angular 过滤器。

于 2012-12-11T23:11:20.463 回答