使用角度材质更新md-select中的布尔值

Question

am struggled in md-select model update when user changes the value need to update the flag as true.Actually i have to iterate the length of the model in md-select and in md-options i show like 1,2...5. 当用户更改值需要将标记更新为true时，我在md-select模型更新中遇到了困难。实际上我必须在md-select和md-options中迭代模型的长度，我显示为1,2 ... 5 。 if user changes the value in drop down means respective flag set to true other should be in false.kindly help me out this problem. 如果用户更改下拉列表中的值，则意味着分别设置为true的其他标志应该为false。请帮助我解决此问题。 following is my code and kindly tell me where i did the logical mistake: 以下是我的代码，请告诉我在哪里发生了逻辑错误：

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

Thanks in advance. 提前致谢。

Answer 1

You can simply create a new copy of testValue object into finalValue variable, then do the boolean assignments in that and use. 您可以简单地将testValue对象的新副本创建为finalValue变量，然后在其中进行布尔分配并使用。 Please refer the below code. 请参考下面的代码。

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

We create a new copy of testValue using method angular.copy() and assign it to final value. 我们使用angular.copy()方法创建一个testValue的新副本，并将其分配给最终值。 Then we use your logic to assign the respective indexed boolean to true . 然后，我们使用您的逻辑将各个索引的布尔值分配给true 。

The problem with your original code, is that you are showing finalValue , without it being even defined as a variable and also no data manipulations were done to it! 原始代码的问题在于，您显示的是finalValue ，甚至没有将其定义为变量，也没有对数据进行任何操作！

Please refer the below working snippet, and let me know if you face any issues implementing the below code! 请参考下面的工作片段，如果在实现以下代码时遇到任何问题，请告诉我！

 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>

使用角度材质更新md-select中的布尔值

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-01-14 03:47:30

使用角度材质更新md-select中的布尔值

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-01-14 03:47:30

解决方案1
1 已采纳 2018-01-14 03:47:30