如何根据 Angular 中先前的 selected 项目禁用下一个 ng-select 项目？

Question

例如：我 select 有 4 件商品。当我 selected select 中的第一个项目时，它会显示第二个 select 与之前相同的项目，但我 selected 的项目将被禁用。接下来的 select 秒也是如此，直到 select.

仍然有 1 个可用项目

P.s。每一个下一个 select，应该会自动 select 编辑第一个可用的项目。

我在下面附上了 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>

请帮我解决这个问题。太棒了！

Answer 1

由于您的规则 1、规则 2 和规则 3 数组完全相同，我首先将其合并为一个：规则。如果不是，您需要确保三个相同的数组以相同的方式更新。

ng-change 通常适用于这些类型的输入。当您 select 一个选项时，它会触发该更改事件，您可以创建自定义函数来处理它。

旁注，您的 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 传递输入模型的函数（您 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 中先前的 selected 项目禁用下一个 ng-select 项目？

How to disable the next ng-select items, based on previous selected items in Angular?

javascript

angularjs

angularjs-scope

angular-filters