AngularJS：当ng-model是数组时未选择SELECT选项

Question

我怎样才能让 Broken 示例（如下）工作从 array 更改它（因为我有很多代码取决于它是array 在应用程序的其他部分）？

我想继续使用array，但我想在模型更改时显示正确的选择选项。单击按钮时模型会正确更改，但在选择中未找到该选项（ng-model 和 ng-options 只是在 array 时不匹配）。

angular.module('app', [])
  .controller('MainCtrl', ['$scope', function($scope) {
  
    $scope.valueWorking = 'value1';
    $scope.selectFilterWorking = [{name: 'name1', value: 'value1'},{name: 'name2', value: 'value2'}];
    
    $scope.valueBroken = ['value1'];
    $scope.selectFilterBroken = [{name: 'name1', value: ['value1']},{name: 'name2', value: ['value2', 'value3']}];
    
  }]);

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<div ng-app="app" ng-controller="MainCtrl">

  <strong>Working</strong> (SELECT <i>is</i> updated when ng-model is a string):<br>
  <select ng-model="valueWorking" 
          ng-options="select.value as select.name for select in selectFilterWorking">
    <option value="">Select an Option</option>
  </select>
  <button ng-click="valueWorking='value2'">Assign to String of 'value2'</button> {{valueWorking}}<br><br>
  
  <strong>Broken</strong> (SELECT <i>not</i> updated when ng-model is an array):<br>
  <select ng-model="valueBroken" 
          ng-options="select.value as select.name for select in selectFilterBroken">
    <option value="">Select an Option</option>
  </select>
  <button ng-click="valueBroken=['value2','value3']">Assign to Array of ["value2","value3"]</button> {{valueBroken}}
  
</div>

单击上面的“运行代码 sn-p”后，请注意初始选项未选择（在 Broken 选择上，当它是 array 时），但最初在 Working 选择string。单击“分配给 ["value2"] 的数组”时，也不会显示正确的选项。

更新：我试图让 OPTIONS ($scope.selectFilterBroken) 匹配模型，而不是相反 - 因此我需要将模型保留为 array。按钮单击只是为了模拟应用程序中操纵array 的其他部分。

任何帮助都会很棒。谢谢，请。

Answer 1

Javascript 中的对象并不相等，即使它们看起来相同，但字符串或其他原始类型却相同。例如，var a = [1];变量 b = [1]; a === b 返回假。但是，如果您执行 JSON.stringify(a) === JSON.stringify(b)，它将返回 true。

当您将 ['value2'] 分配给 valueBroken 时，valueBroken 被重新声明为一个新数组，因此它与 selectFilterBroken 中的不匹配。

为了解决这个问题，我们想找到一种方法将 ['value2'] 的引用分配给 valueBroken。我编写了一个函数，通过比较它们的字符串化版本来查找 selectFilterBroken 中的哪个数组与我们想要的数组匹配。找到后，将 selectFilterBroken 中的引用分配给 valueBroken。

如果不知道您的应用到底发生了什么，很难猜测该解决方案是否适合您，但您可以从那里开始。

angular.module('app', [])
  .controller('MainCtrl', ['$scope', function($scope) {
  
    $scope.valueWorking = 'value1';
    $scope.selectFilterWorking = [{name: 'name1', value: 'value1'},{name: 'name2', value: 'value2'}];
    
    $scope.valueBroken = ['value1'];
    $scope.selectFilterBroken = [{name: 'name1', value: ['value1']},{name: 'name2', value: ['value2']}];

    $scope.selectBroken = function(valueAry){
    for(var i = 0, m = $scope.selectFilterBroken.length; i < m; i++){
       if(JSON.stringify($scope.selectFilterBroken[i].value) === JSON.stringify(valueAry)){

       $scope.valueBroken = $scope.selectFilterBroken[i].value;
       break;
    }
    }
    
    }
  }]);

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<div ng-app="app" ng-controller="MainCtrl">

  <strong>Working</strong> (SELECT <i>is</i> updated when ng-model is a string):<br>
  <select ng-model="valueWorking" 
          ng-options="select.value as select.name for select in selectFilterWorking">
    <option value="">Select an Option</option>
  </select>
  <button ng-click="valueWorking='value2'">Assign to String of 'value2'</button> {{valueWorking}}<br><br>
  
  <strong>Broken</strong> (SELECT <i>not</i> updated when ng-model is an array):<br>
  <select ng-model="valueBroken" 
          ng-options="select.value as select.name for select in selectFilterBroken">
    <option value="">Select an Option</option>
  </select>
  <button ng-click="selectBroken(['value2'])">Assign to Array of ["value2"]</button> {{valueBroken}}
  
</div>

Answer 2

它不绑定的原因是因为 $scope.valueBroken 上的数组值与 $scope.selectFilterBroken 中的数组不同。为了使它们匹配，它们必须在同一个数组中。例如，我编辑了您的代码并将 $scope.selectFilterBroken 中的项目的值分配给 $scope.valueBroken。现在运行良好。

angular.module('app', [])
  .controller('MainCtrl', ['$scope', function($scope) {
  
    $scope.valueWorking = 'value1';
    $scope.selectFilterWorking = [{name: 'name1', value: 'value1'},{name: 'name2', value: 'value2'}];
    
    
    $scope.selectFilterBroken = [{name: 'name1', value: ['value1']},{name: 'name2', value: ['value2']}];
    $scope.valueBroken = $scope.selectFilterBroken[0].value;
    
  }]);

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<div ng-app="app" ng-controller="MainCtrl">

  <strong>Working</strong> (SELECT <i>is</i> updated when ng-model is a string):<br>
  <select ng-model="valueWorking" 
          ng-options="select.value as select.name for select in selectFilterWorking">
    <option value="">Select an Option</option>
  </select>
  <button ng-click="valueWorking='value2'">Assign to String of 'value2'</button> {{valueWorking}}<br><br>
  
  <strong>Broken</strong> (SELECT <i>not</i> updated when ng-model is an array):<br>
  <select ng-model="valueBroken" 
          ng-options="select.value as select.name for select in selectFilterBroken">
    <option value="">Select an Option</option>
  </select>
  <button ng-click="valueBroken=['value2']">Assign to Array of ["value2"]</button> {{valueBroken}}
  
</div>