AngularJS-级联选择同一来源

Question

I need something similar to this: http://jsfiddle.net/PR6FM/ , but done in angular way. The problem is that Im creating the selects by ng-repeat, it looks like this:

    <div ng-repeat="newCar in myCars">
        <select ng-model="newCar.carId" ng-options="car.carId as car.name for car in cars | filter: {'carId': '!'+myCars[$index-1].carId}"></select>
    </div>
    <button type="button" ng-click="myCars.push({'carId':myCars.length+1, 'name': "someName"})">ADD</button>

The point is to filter/remove from the source of new added selectbox cars that has been already selected.

I know that the filter:

filter: {'carId': '!'+myCars[$index-1].carId}

is not the way to go, but it is a good lead.

Answer 1

Have a look at this fiddle: http://jsfiddle.net/jarydcarolin/aLyzn30m/1/

$scope.carArray = function (index) {
   var cars =  ['Renault', 'Holden', 'Ford','Dodge'];
   return cars.filter(function (el) {
       return ($scope.resultArray.map(function(e){return e.car}).slice(0,index).indexOf(el) === -1)
   })
}

The concept here is to first set up how many cascades you actually want, it's possible and likely that it's independent from your actual array of options to select from. I set them up as empty objects to we get nice binding through the ng-repeat which we wouldn't get with an ordinary array.

Then make each options list dynamic by using a function to return the array given the index of that SELECT within the cascade. This solution keeps the logic out of the child scopes so behaviour is consistent.

Answer 2

尝试使用

<div ng-repeat="newCar in myCars | -carId">