Question

现在，我正在尝试选择已禁用的框。

当$ shop.products.product [i] .productId通过selectBox更改时，我希望在选择框选项中禁用该值。

例如，如果我在第二行的选择框中选择3，则禁用选择框选项1,3。

因此，当更改$ shop.products [i] .productId时，我会注册$ watch女巫重新同步isDisabled字段。

我不知道为什么$ watch没有打电话。请帮助我。

// Code goes here

angular.module("myApp")
    .controller("myCtrl", function($scope) {
      
        $scope.shop = {
          "id" : 'shop1',
          "products" : [
            {"productId" : 1,"desc" : 'product1'},
            {"productId" : 2,"desc" : 'product2'}
          ]
        };
      
        $scope.allSelectBoxItems = [
          {"id" : 1, "isDisabled" : true}, 
          {"id" : 2, "isDisabled" : true}, 
          {"id" : 3, "isDisabled" : false}, 
          {"id" : 4, "isDisabled" : false}
        ];
        
        $scope.addWatcher = function(index){
            console.log('register watcher to ' + index);
            $scope.$watch('shop.product[' + index + '].productId', function(newValue, oldValue){
              console.log('watcher envoked');
              if (newValue != oldValue) {
                var selected = $scope.shop.products.map(function (product) {
                    return product.productId;
                });

                for (var i = 0; i < $scope.allSelectBoxItems.length; i++) {
                    var isSelected = selected.includes($scope.allSelectBoxItems[i].productId);
                    console.log(isSelected);
                    $scope.allSelectBoxItems.isDisabled = isSelected;
                }
            }
            }); 
        }
        
        angular.forEach($scope.shop.products, function(value, index){
          $scope.addWatcher(index);  
        });
        
      
        $scope.addProduct = function(){
          var nextProductId = $scope.shop.products.length + 1;
          var newProduct = {"productId" : nextProductId ,"desc" : 'product' + nextProductId};
          
          $scope.shop.products.push(newProduct);
          $scope.addWatcher(nextProductId - 1);
        }
        
      
    });

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://code.angularjs.org/1.6.4/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.6.4/angular-animate.min.js"></script>
    <script src="https://code.angularjs.org/1.6.4/angular-touch.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
    <script>
      angular.module("myApp", ['ngAnimate', 'ui.bootstrap'])
    </script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="myCtrl">
    <div>
      <table class="table">
        <tbody>
          <tr>
            <th>id</th>
            <td>{{shop.id}}</td>
          </tr>
          <tr>
            <td>
              products
              <br>
              <button type="button" class="btn btn-default" ng-click="addProduct()"><span class="glyphicon glyphicon-plus" aria-hidden="true" style="margin-right:4px"></span>add product</button>
            </td>
            <td>
              <table class="table">
                <tbody>
                  <tr>
                    <td>producId</td>
                    <td>desc</td>
                  </tr>
                  <tr ng-repeat="product in shop.products">
                    <td>
                      <select ng-model="product.productId" ng-options="selectBoxItem.id as selectBoxItem.id disable when selectBoxItem.isDisabled for selectBoxItem in allSelectBoxItems"></select>
                    </td>
                    <td>
                      {{product.desc}}
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>

</html>

角度，动态禁用选择

0 个答案: