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

ng-repeat フィルターに基づいて、skillsArray を自動的に縮小または拡大することを望んでいると思います。それはうまくいきません。この行で：

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

フィルターの結果は親スコープには表示されず、ng-repeat スコープにのみ表示されます。つまり、フィルターは $scope.employers を変更しないため、スキル関数はサーバーから受信した完全な Employers 配列で引き続き動作します。

目的を達成する 1 つの方法は、独自のフィルター関数を定義し、それをクエリ フィルター 1 とチェーンすることです。

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 に答える