versuchen, $ .inArray zu verstehen, oder $ scope in "controller As" -Syntax in AngularJS

Question

zu konvertieren, sollte dies eine relativ einfache für Sie alle sein, ich versuche, einen Filter zu verwenden, die ich online in meiner Angular App gefunden habe, und versuchen, die $ .inArray Methode in diesem JsFiddle zu verstehen:

http://jsfiddle.net/65Pyj/

ich bin vertraut mit $ Umfang, aber nie die $ .inArray Methode gesehen und weiß nicht, wie dies zu konvertieren über vm.key Notation.

Normalerweise würde ich versuchen, dies herauszufinden, aber mein Projekt ist fällig in ein paar Stunden und ive zog bereits eine ganze Nacht, zum ersten Mal eine Frage hier, danke an alle, die im Voraus helfen können.

ive konvertiert es bisher so aus: 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> 

` ``

und meine 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; 
    } 
} 

`` `

Aber es scheint nicht ganz richtig zu funktionieren, nichts, was ich versuche, funktioniert, ich weiß, ich habe einen Mangel an Grundlagen dahinter, aber ich brauche nur dieses letzte Feature zu arbeiten und ich werde mit meinem Projekt fertig, so würde jede Hilfe sein geschätzt.

Answer 1

Sie haben keinen Controller erstellt.

Rechts Code:

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

JsFiddle Beispiel:

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