无法在选择标记中设置默认选定选项

时间:2015-06-13 05:07:51

标签: angularjs select selected

我遇到了angular.js 1.4.0的问题。如果我使用'数字',我无法在select标签中设置默认值,但如果我使用'string',它将起作用。 select语句是视图中的硬代码。我已经在控制器中初始化了我的模型。

//这不起作用,传递的值是'数字' $ scope.colors = 2;

//这将工作,传递的值是'字符串' $ scope.colors = '2';

查看/ MODEL:

<div ng-app="app">
  <div ng-controller="MyController">
    <select ng-model="colors">
      <option value="1">Red</option>
      <option value="2">Blue</option>
      <option value="3">Green</option>
    </select>
    <p>Selected Color: {{colors}}</p>
    <div ng-switch="colors">
      <p ng-switch-when="1"><span class="red-block"></span></p>
      <p ng-switch-when="2"><span class="blue-block"></span></p>
      <p ng-switch-when="3"><span class="green-block"></span></p>
    </div>
</div>

控制器:

angular.module('app', []).controller('MyController', function($scope) {
   /* angular.js version 1.4.0 issue: 
      $scope.colors = 2; --> will not work
      $scope.colors = '2'; --> will work

      This is working on angular.js version 1.3.15
   */
   $scope.colors = 1;
});

如果我使用angular.js版本1.3.15,'number'和'string'都可以使用。

注意:在codepen中设置的角度版本是1.4.0,因此您可以看到错误。

http://codepen.io/joemalski/pen/YXQMKO?editors=001

2 个答案:

答案 0 :(得分:0)

JS:

$scope.options = [{ name: "a", id: 1 }, { name: "b", id: 2 }];
$scope.selectedOption = $scope.options[1];

HTML:

<select data-ng-options="o.name for o in options" data-ng-model="selectedOption"></select>

这将使“b”项目被选中。

答案 1 :(得分:0)

好吧,不要使用静态选择/选项,而是使用动态选择:

$scope.colors = ["red","blue","green"];
HTML中的

<select ng-model="selectedColor" ng-option="color in colors"></select>

<div ng-switch="selectedColor">
    <p ng-switch-when="red"><span class="red-block"></span></p>
    <p ng-switch-when="blue"><span class="blue-block"></span></p>
    <p ng-switch-when="green"><span class="green-block"></span></p>
</div>

使用字符串,这样你就可以安全了。