尝试理解$.inArray，或将$scope转换为“$scope”;控制器As”;AngularJS中的语法

trying to understand $.inArray, or converting $scope to "controller As" syntax in AngularJS

本文关键字：scope 控制器 As AngularJS 语法 转换 inArray 或将      更新时间：2024-03-05

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

http://jsfiddle.net/65Pyj/

我熟悉$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;
    }
}

```

但它似乎还不太好用，我尝试的都不起作用，我知道我背后缺乏基本原理，但我只需要最后一个功能就可以了，我的项目就要完成了，所以，如果有任何帮助，我将不胜感激。

您没有创建控制器。

右侧代码：

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

Js投标示例：

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

相关文章：