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

Question

如何让 Broken 示例(下面)工作而不从数组中更改它(因为我有很多代码这取决于它是应用程序其他部分中的数组)吗？

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

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>

单击上面的“运行代码片段”后，请注意未选择初始选项(在 Broken 选择，当它是一个 array 时)，但最初被选中在 Working 上选择 string。单击“分配给 [“value2”] 的数组”时，也不会显示正确的选项。

更新:我正在尝试让选项 ($scope.selectFilterBroken) 匹配模型，而不是相反 - 因此我需要将模型保留为 数组。单击按钮只是为了模拟应用程序的其他部分操作数组。

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

Answer 1

Javascript 中的对象并不相等，即使它们看起来相同，但字符串或其他基本类型是相同的。例如，var a = [1];变量 b = [1]; a === b 返回 false。但是，如果您执行 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>