$ scope不與AngularJS中的控制器其他部分進行過濾

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過濾器使skillArray自動縮小或增長。 那行不通。 在這一行：

<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>

另請參閱創建角度過濾器 。