不同条件下的 ng-model答案

【问题标题】：ng-model on different condition不同条件下的 ng-model
【发布时间】：2018-05-04 11:12:41
【问题描述】：

我有 2 个不同的数组设置为：

var oldarr = ['one','two','three'];

var newarr = ['four','five','six'];

var condi = 1 / 0;

我使用数组值作为 ng-model 作为选择下拉列表的选项值。但是我想根据 cond 变量的值使用不同的数组，这意味着：如果 condi 为 1，我将使用 ng-model = oldarr 并且 vif confi 为 2，我将使用 ng-model = newarr。

我的下拉菜单如下。有人可以建议我怎么做吗？

<select ng-model="oldarr " ng-selected="{{defaultvalue == selectedslastatus}}">
  <option ng-repeat="vals in oldarr ">{{vals }}</option>
</select>

【问题讨论】：

如果要根据条件使用model，可以使用ng-show。如果您需要更多详细信息，请告诉我，我会回答。
condi 的变化如何？是动态的还是只是在初始化期间

标签： javascript arrays angularjs

【解决方案1】：

我认为最好的方法是使用中间数组。

（实际上这可以通过ng-show 或ng-if 或ng-switch 完成，但如果您想要一个干净的HTML 模板（视图）并且您的数组结构相同，您可能需要将逻辑迁移到控制器）

喜欢：

<select ng-model="modelArr" ng-selected="{{defaultvalue == selectedslastatus}}">
  <option ng-repeat="vals in modelArr ">{{vals }}</option>
</select>

并执行在控制器中使用哪个数组的逻辑。

这就是你的控制器的样子：

// 
$scope.$watch('condi', function (){
    if (condi === true)
        $scope.modelArr = newArr;
    else
        $scope.modelArr = oldArr;
})

【讨论】：

【解决方案2】：

我会简单地用ng-show 或类似的东西交换意见。假设condi 并不总是布尔值（1 或0），我建议ng-switch。这是一个例子：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.condi = 1;
  $scope.oldarr = ['one', 'two', 'three'];
  $scope.newarr = ['four', 'five', 'six'];

  $scope.changeCondi = function() {
    $scope.condi = ($scope.condi == 1) ? 0 : 1;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

  <button ng-click="changeCondi()">Change condi</button> : {{condi}}
  <div ng-switch="condi">
    <div ng-switch-when="1">
      <select ng-model="oldar">
        <option ng-repeat="vals in oldarr">{{vals}}</option>
      </select>
      Selected: {{oldar}}
    </div>

    <div ng-switch-when="0">
      <select ng-model="newar">
        <option ng-repeat="vals in newarr">{{vals}}</option>
      </select>
      Selected: {{newar}}
    </div>
  </div>

</div>

【讨论】：