使用角度材質更新md-select中的布爾值

Question

當用戶更改值需要將標記更新為true時，我在md-select模型更新中遇到了困難。實際上我必須在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>

提前致謝。

Answer 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 ，甚至沒有將其定義為變量，也沒有對數據進行任何操作！

請參考下面的工作片段，如果在實現以下代碼時遇到任何問題，請告訴我！

 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