基于多个控件或 ng-models 过滤 ng-options

Question

情况：

我有一个后端 Laravel 5 和一个前端 AngularJS。应用程序是关于允许用户 select 多个依赖非常高价值的产品。

一个。用户 select 从下拉列表中选择了一个产品 - select-选项。产品已添加到购物车。

乙。然后用户单击添加按钮添加更多产品，这会使用下拉 select-选项 HTML 元素动态添加一行。这是使用 AngularJS 和 $compile / $scope 动态完成的，以添加已编译的 HTML.

C。当用户添加一行时，最初产品下拉 select-option 没有值 selected.

D.用户 select 从下拉 select 选项中选择了一个产品。产品已添加到购物车。

E.用户可以继续添加大约 50 种产品。看看这个 UI：

现在的情况是，当添加新行时，相关的下拉列表不应显示任何已经 select 在上面的任何下拉列表中编辑的产品。

有人可以帮我吗？

谢谢！

Answer 1

试试这个。希望有用。
var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope,$filter) {
  $scope.rep = [];
  $scope.xyz = function(){
    var sahed = $filter('filter')($scope.rep, $scope.sel) ;
    if(sahed.length <= 0){
       $scope.rep.push($scope.sel)
       return false;
    }

  };
  $scope.coll =[
   {id: 1,
   rate : 50,
   base_price : 50,
     product_name : 'ab'
   },
   {id: 2,
   rate : 50,
   base_price : 505,
    product_name : 'abc' 
   },
   {id: 3,
   rate : 520,
   base_price : 500,
     product_name : 'abcd'
   },
   {id: 4,
   rate : 50,
   base_price : 505,
    product_name : 'abcef' 
   },
  ];
});

这里是 html

 <body ng-controller="MainCtrl">
    <select name="sel" id="sel" ng-model="sel"
    ng-options="x as x.product_name for x in coll track by x.id" ng-change="xyz()">
      <option value="">select product</option>
    </select>
    <table border="0">
      <thead>
        <tr>
          <td>name</td>
          <td>price</td>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="x in rep">
          <td>{{x.product_name}}</td>
          <td>{{x.base_price}}</td>
        </tr>
      </tbody>
    </table>
  </body>

例如看https://plnkr.co/edit/pXNkwisa7A3aFBPmIB0G?p=preview

基于多个控件或 ng-models 过滤 ng-options

Filter ng-options based on multiple controls or ng-models

angularjs

angularjs-scope

angular-filters