代码之家  ›  专栏  ›  技术社区  ›  Roman A.

如何基于Angular中先前选定的项目禁用下一个ng select项目?

  •  -1
  • Roman A.  · 技术社区  · 8 年前

    我在下面附上了snipper,在那里我直观地展示了我想要实现的流程。

    var app = angular.module('ngoptions', []);
    
    app.controller('MainCtrl', function($scope) {
    
      $scope.rules1 = [{
        type: 'first item',
        value: 'first item',
        disabled: false
      }, {
        type: 'second item',
        value: 'second item',
        disabled: false
      }, {
        type: 'third item',
        value: 'third item',
        disabled: false
      }, {
        type: 'fourth item',
        value: 'fourth item',
        disabled: false
      }];
    
      $scope.rules2 = [{
        type: 'first item',
        value: 'first item',
        disabled: true
      }, {
        type: 'second item',
        value: 'second item',
        disabled: false
      }, {
        type: 'third item',
        value: 'third item',
        disabled: false
      }, {
        type: 'fourth item',
        value: 'fourth item',
        disabled: false
      }];
    
      $scope.rules3 = [{
        type: 'first item',
        value: 'first item',
        disabled: true
      }, {
        type: 'second item',
        value: 'second item',
        disabled: true
      }, {
        type: 'third item',
        value: 'third item',
        disabled: false
      }, {
        type: 'fourth item',
        value: 'fourth item',
        disabled: false
      }];
    });
    /* Put your css in here */
    <!DOCTYPE html>
    <html ng-app="ngoptions">
    
    <head>
      <meta charset="utf-8" />
      <title>AngularJS Plunker</title>
      <script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
      <script>
      document.write('<base href="' + document.location + '" />');
      </script>
      <link rel="stylesheet" href="style.css" />
      <script src="app.js"></script>
    </head>
    
    <body ng-controller="MainCtrl">
      <select ng-model="item" ng-options="item.type as item.value disable when item.disabled for item in rules1">
        <option value="" style="display: none" selected="selected">Select When
        </option>
      </select>
      <br>
      after selecting first select, first item:
        <br>
      <select ng-model="item1" ng-options="item.type as item.value disable when item.disabled for item in rules2">
        <option value="" style="display: none" selected="selected">Select When
        </option>
      </select>
      <br>
      after selecting second select, second item:
        <br>
            <select ng-model="item2" ng-options="item.type as item.value disable when item.disabled for item in rules3">
        <option value="" style="display: none" selected="selected">Select When
        </option>
      </select>
      
    </body>
    
    </html>

    请帮我做这个。太棒了!

    1 回复  |  直到 8 年前
        1
  •  0
  •   intrepid_em    8 年前

    由于您的rule1、rule2和rule3数组是完全相同的,因此我首先将其转换为一个:规则。如果没有,则需要确保以相同的方式更新三个相同的阵列。

    ng-change

    请注意,您的ng模型的名称与循环中的项相同,但它们不是同一件事。

    <select ng-model="item" ng-options="item.type as item.value disable when item.disabled for item in rules" data-ng-change="select(item)">
        <option value="" style="display: none" selected="selected">Select When
        </option>
    </select>
    

    我添加了在输入模型中传递的选择函数(您选择的输入选项的值)。

    scope.select = function (value) {
    
        if (!value) { return; }
    
        for (var i=0;i<$scope.rules.length;++i) {
          if ($scope.rules[i].value === value) {
            $scope.rules[i].disabled = true;
          }
        }
    };
    

    http://jsbin.com/tomoma/edit?html,js,console,output