Question

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

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

我们使用方法testValue创建angular.copy()的新副本，并将其分配给最终值。然后我们使用您的逻辑将相应的索引布尔值分配给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>

使用角度材质

1 个答案: