Question

例如：我选择了4个项目。当我在选择中选择第一个项目时，它将显示第二个选项，其项目与之前相同，但我选择的项目将被禁用。对于下一个选择也是如此，直到它仍然是选择的1个可用项目。

P.S。每个下一个选择，应自动选择第一个可用项目。

我在下面附上了一个片段，我在视觉上显示了我想要实现的流程。

＆＃13;

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
  }];
});

＆＃13;

/* Put your css in here */

＆＃13;

<!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>

＆＃13;

请帮我解决这个问题。会很棒！

Answer 1

由于你的rule1，rule2和rule3数组完全相同，我首先要把它变成一个：规则。如果没有，您需要确保以相同的方式更新三个相同的阵列。

对于这些类型的输入，

ng-change通常效果很好。当您选择一个选项时，它将触发该更改事件，您可以使用自定义函数来处理它。

旁注，您的ng-model与循环中的项目名称相同，但这些并不相同。

<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>

我添加了传入输入模型的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

如何根据Angular中之前选择的项目禁用下一个ng-select项目？

1 个答案: