Question

情况：

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

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

B中。然后，用户单击“添加”按钮以添加更多产品，这将使用下拉选择选项HTML元素动态添加行。这是使用带有$ compile / $ scope的AngularJS动态完成的，以添加已编译的HTML。

℃。当用户添加行时，最初的产品下拉选择选项没有选择值。

d。用户从下拉选择选项中选择产品。产品已添加到购物车中。

电子。用户可以继续添加约50种产品。看看这个UI：

UI Looks like

现在条件是，当添加新行时，相关的下拉列表不应显示已在上述任何下拉列表中选择的任何产品。

有人可以帮帮我吗？

谢谢！

Answer 1

试试这个。希望它能奏效。
var app = angular.module（＆＃39; plunker＆＃39;，[]）;

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

1 个答案: