Question

对于大家来说这应该是一个相对简单的，我试图使用我在Angular应用程序中在线找到的过滤器，并试图理解这个JsFiddle中的$ .inArray方法：

我熟悉$ scope，但从未见过$ .inArray方法，也不知道如何将其转换为vm.key表示法。

我通常会尝试自己解决这个问题，但是我的项目将在几个小时内完成，而且我已经拉了一个更好的时间，第一次在这里问一个问题，感谢任何可以提前帮助的人。

到目前为止，我已将其转换为：http://jsfiddle.net/65Pyj/646/

HTML： ```

<div ng-app="fruit">
    <div ng-controller="FruitCtrl as vm">

        <input type="checkbox" ng-click="vm.includeColour('Red')"/> Red</br/>
        <input type="checkbox" ng-click="vm.includeColour('Orange')"/> Orange</br/>
        <input type="checkbox" ng-click="vm.includeColour('Yellow')"/> Yellow</br/>

        <ul>
            <li ng-repeat="f in fruit | filter:vm.colourFilter">
                {{f.name}}
            </li>
        </ul>

        Filter dump: {{colourIncludes}}
    </div>
</div>

```

和我的js：

'use strict'

angular.module('fruit', []);

function FruitCtrl() {
        var vm = this;
    vm.fruit = [
        {'name': 'Apple', 'colour': 'Red'},
        {'name': 'Orange', 'colour': 'Orange'},
        {'name': 'Banana', 'colour': 'Yellow'}];

    vm.colourIncludes = [];

    vm.includeColour = function(colour) {
        var i = $.inArray(colour, vm.colourIncludes);
        if (i > -1) {
            vm.colourIncludes.splice(i, 1);
        } else {
            vm.colourIncludes.push(colour);
        }
    }

    vm.colourFilter = function(fruit) {
        if (vm.colourIncludes.length > 0) {
            if ($.inArray(fruit.colour, vm.colourIncludes) < 0)
                return;
        }

        return fruit;
    }
}

```

但它似乎还没有正常工作，我尝试的任何工作都没有，我知道我背后缺乏基础知识但是我只需要这个最后一个功能就可以工作而且我的项目很糟糕，所以，任何帮助都会不胜感激。

Answer 1

您没有创建控制器。

正确的代码：

angular.module('fruit', [])
    .controller( 'FruitCtrl', FruitCtrl );

JsFiddle示例：

'use strict'

angular.module('fruit', [])
    .controller( 'FruitCtrl', FruitCtrl ); 

function FruitCtrl() {
        var vm = this;
    vm.fruit = [
        {'name': 'Apple', 'colour': 'Red'},
        {'name': 'Orange', 'colour': 'Orange'},
        {'name': 'Banana', 'colour': 'Yellow'}];

    vm.colors = {};

    vm.colourFilter = function(fruit) {
        console.log( fruit, vm.colors[fruit.colour] );
        return vm.colors[fruit.colour];
    }
    
    vm.selectedFruits = [];
}

<div ng-app="fruit">
    <div ng-controller="FruitCtrl as vm">

        <input type="checkbox" ng-model="vm.colors.Red"/> Red</br/>
        <input type="checkbox" ng-model="vm.colors.Orange"/> Orange</br/>
        <input type="checkbox" ng-model="vm.colors.Yellow"/> Yellow</br/>

        <ul>
            <li ng-repeat="f in vm.fruit | filter:vm.colourFilter">
                {{f.name}}
            </li>
        </ul>

        Filter dump: {{vm.colors}}
    </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

试图了解$ .inArray，或将$ scope转换为＆＃34;控制器As＆＃34; AngularJS中的语法

1 个答案: