使用角度材料更新 md-select 中的布尔值答案

【问题标题】：update the boolean value in md-select using angular material使用角度材料更新 md-select 中的布尔值
【发布时间】：2018-01-14 03:34:32
【问题描述】：

当用户更改值时，我在 md-select 模型更新中遇到了困难，需要将标志更新为 true。实际上，我必须在 md-select 和 md-options 中迭代模型的长度，我显示为 1,2。 ..5。如果用户更改下拉列表中的值意味着相应的标志设置为 true 其他应该是 false。请帮我解决这个问题。以下是我的代码，请告诉我我在哪里犯了逻辑错误：

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <style>

      </style>
      <script language = "javascript">
         angular
            .module('testApp', ['ngMaterial'])
            .controller('myCTRL', myCTRL);

         function myCTRL ($scope) {
         $scope.chooseValue =false;

     $scope.selectedValue = 1;

  $scope.testValue = [
    {  isEnabled: false},
    { isEnabled: false },
    { isEnabled: false }
  ];

  $scope.submitvalue = function(){
  console.info($scope.testValue)
  $scope.testValue[$scope.selectedValue].isEnabled = true;
  console.info($scope.finalvalue)
  }


         }                 
      </script>           
   </head>

   <body ng-app = "testApp"> 
      <div id = "inputContainer" class = "inputDemo"
         ng-controller = "myCTRL as ctrl" ng-cloak>
         <form role="form" name="deviceForm">



                    <div>

                        <md-input-container >
                            <label>select flags want to enable</label>
                            <md-select ng-model="selectedValue" >
                                <md-option   ng-repeat="(key,value) in testValue">{{key}}</md-option>
                            </md-select>
                        </md-input-container>

                    </div>
                </form>
                <input type="submit" ng-click="submitvalue()">

      </div>
   </body>
</html>

提前致谢。

【问题讨论】：

为什么要这样设置模型？有什么理由吗？这个选择框的作用是什么？
您能否编辑并让您的问题更易于理解？我很难准确理解你想要什么。
@MikeTung 我想在用户更改下拉值时更新相应的布尔值。

标签： javascript angularjs angular-material javascript-objects

【解决方案1】：

您可以简单地将testValue 对象的新副本创建到finalValue 变量中，然后在其中进行布尔赋值并使用。请参考以下代码。

console.info($scope.testValue)
$scope.finalValue = angular.copy($scope.testValue);
$scope.finalValue[$scope.selectedValue].isEnabled = true;
console.info($scope.finalValue)

我们使用方法angular.copy() 创建testValue 的新副本并将其分配给最终值。然后我们使用您的逻辑将相应的索引布尔值分配给true。

原始代码的问题在于，您显示的是finalValue，甚至没有将其定义为变量，也没有对其进行任何数据操作！

请参考下面的工作 sn-p，如果您在实现以下代码时遇到任何问题，请告诉我！

angular
  .module('testApp', ['ngMaterial'])
  .controller('myCTRL', myCTRL);

function myCTRL($scope) {
  $scope.chooseValue = false;
  $scope.finalValue = {};
  $scope.selectedValue = 1;

  $scope.testValue = [{
      isEnabled: false
    },
    {
      isEnabled: false
    },
    {
      isEnabled: false
    }
  ];

  $scope.submitvalue = function() {
    console.info($scope.testValue)
    $scope.finalValue = angular.copy($scope.testValue);
    $scope.finalValue[$scope.selectedValue].isEnabled = true;
    console.info($scope.finalValue)
  }


}

<html lang="en">

<head>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <style>

  </style>
</head>

<body ng-app="testApp">
  <div id="inputContainer" class="inputDemo" ng-controller="myCTRL as ctrl" ng-cloak>
    <form role="form" name="deviceForm">
      <div>
        <md-input-container>
          <label>select flags want to enable</label>
          <md-select ng-model="selectedValue">
            <md-option ng-repeat="(key,value) in testValue">{{key}}</md-option>
          </md-select>
        </md-input-container>

      </div>
    </form>
    <input type="submit" ng-click="submitvalue()">

  </div>
</body>

</html>

【讨论】：

您好，感谢您的帮助。我们可以不使用角度复制来做到这一点。
@Sathish 您可以只使用原始变量testValue，因此代码将为console.info($scope.testValue) $scope.testValue[$scope.selectedValue].isEnabled = true; console.info($scope.testValue)，但如果您想使用新变量尝试var finalValue = Object.assign({}, testValue);，我建议您使用新变量...不使用angular.copy的原因是什么？