javascript - ng-init 在选择选项中覆盖 ng-model (添加了 plunker)

Question

https://plnkr.co/edit/RgGzgGkBPaxvKHNE688K?p=preview

在上面的示例中，我对选择选项进行硬编码，并通过 ng-init 属性初始化为颜色“红色”。我想在页面加载时显示默认颜色“红色”。

 <select ng-model="mycolor" ng-init="mycolor = 'red'">
      <option>red</option>
      <option>green</option>
    </select>

在 Controller 中，我将“mycolor”更新为“绿色”，但由于 ng-init 属性，选择框仍然显示“红色”。 (我这样做是因为将从后端检索 mycolor)

app.controller('MainCtrl', function($scope) {
  $scope.mycolor = 'green';
});

如何解决这个问题？简而言之，我想要实现的是，我想在页面加载时在选择框中显示红色默认值，如果后端的 mycolor 发生任何更改，则应将其覆盖为新颜色。就我而言，它是绿色的。

Answer 1

你可以做到

<select ng-model="mycolor" ng-init="mycolor = mycolor || 'red'">

所以mycolor如果有值，模型将设置为其自身，否则默认为 'red' .

参见plunker 。作为示例，我有 5 秒的超时时间将颜色更改为蓝色以模拟后端更改。