如何根据所有下拉值的测试设置按钮文本？

Question

我有一个清单。列表中的每一项都是一个下拉菜单。

每个下拉列表的初始值或选定值是A。

还有一个按钮。

当我更改下拉值时，它应该更改按钮文本。目前正在运行。

我的问题是，当所选的下拉值为A按钮文本为Fixed时。对于所有其他值，它是 Not Fixed.

https://plnkr.co/edit/8qxZRhNOryGl2f9NFEz5?p=preview

<!DOCTYPE html>
<html ng-app="plunker">
<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
  <button>{{btn}}</button>
  <div ng-repeat="x in arr">{{x}}
    <select class="selectpicker" ng-model="selectedValue" ng-change="change(selectedValue)">
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
  </div>
</body>
</html>

重现问题的步骤。

目前所有下拉菜单显示 A，按钮文本为 Fixed。
将第一个下拉值 A 更改为 B。
- 按钮文本现在是 Not Fixed。
将第二个下拉值 A 更改为 B。
- 按钮文本保持 Not Fixed。
将第一个下拉列表的值更改为 A，将第二个下拉列表的值保留为 B。
- 实际行为：
  - 按钮文本为 Fixed。
- 期望的行为：
  - 按钮文本应为 Not Fixed，因为其中一个下拉值不是 A。

问题：如何更改下面的代码以实现所需的行为。

$scope.change = function(value){
  console.log(value);
  if(value !='A'){
    $scope.btn = ' NOT Fixed';
  }else{
    $scope.btn = 'Fixed';
  }
}

Answer 1

假设如下规则：当所有下拉值都是A时，那么按钮的文字必须是"Fixed"，否则就是"Not Fixed"。

您没有正确检查条件。如果在任何时候最后选择的下拉列表的值不是 "A"，您的代码会将按钮文本设置为 'Fixed'。它不考虑所有其他下拉列表的值。这是一种实现你想要的方式：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.btn = 'Fixed';
  $scope.arr = [1, 2, 3];
  $scope.selectedValues = {
    [1]: 'A',
    [2]: 'A',
    [3]: 'A'
  };

  $scope.change = function() {
    if (
      Object
        .values($scope.selectedValues)
        .every(function(e) { return e === 'A'; })
    ) {
      $scope.btn = 'Fixed';
    } else {
      $scope.btn = 'NOT Fixed';
    }
  }

  $scope.change();
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <button>{{btn}}</button>
  <div ng-repeat="x in arr">{{x}}
    <select class="selectpicker" ng-model="selectedValues[x]" ng-change="change(selectedValue)">
                <option>A</option>
                <option>B</option>
                <option>C</option>
          </select>

  </div>
</body>

</html>

Answer 2

If you again change the value of first dropdown B to A .it show button text is Fixed why ??

选择 'A' 时文本为 'Fixed' 因为您的 if 语句说“如果值为 not a，则将 $scope.btn 分配给' NOT Fixed'，否则将$scope.btn分配给'Fixed'。

Fixed text only show when each dropdown value is A`.

为了完成此任务，您必须以不同的方式处理 $scope.btn 的作业。在重新分配变量之前，您不仅需要引用传入的值，还需要查看其他 2 个 select 菜单的值。

如何根据所有下拉值的测试设置按钮文本？

How to set button text based on test of ALL dropdown values?

javascript

angularjs

angularjs-directive