javascript - Angular js选择默认下拉菜单值

标签 javascript angularjs

使用 Angular js,我希望在下拉菜单中默认选择 service2 值。

http://plnkr.co/edit/ssFHZEBuYWPUACEJ5GTb?p=preview

<!doctype html>
<html ng-app>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
    <script src="script.js"></script>

  </head>
  <body>

<div ng-controller="MyCntrl">
  <select ng-model="prop.value" ng-options="v.name for v in prop.values">
  </select>

  {{ prop.value.name}}
{{ prop.value.id}}
</div>


  </body>
</html>

脚本.js

 function MyCntrl($scope) {
      $scope.prop = {   "type": "select", 
        "name": "Service",
        "value":{"id":2, "name": "Service 2" }, 
    "values": [ {"id":1, "name": "Service 1" }, {"id":2, "name": "Service 2" }, {"id":3, "name": "Service 3" }, {"id":4, "name": "Service 4" }] 
      };

}

这是我想要实现的目标: 1)更改所选对象的id和名称 2) 默认选择一个值并显示其id和名称

在示例中,第二个服务的 ID 和名称显示良好。但是,下拉菜单无法选择服务2。

我该如何解决这个问题?

问候

最佳答案

你真的在使用 Angular 1.0 吗?如果您可以使用 Angular >= 1.2,只需使用 track by 功能:

<select ng-model="prop.value" ng-options="v.name for v in prop.values track by v.id">

示例:Plunker

资源: Documentation for ngOptions

关于javascript - Angular js选择默认下拉菜单值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33711854/

相关文章:

javascript - 有没有办法在 jQuery 中执行 'scoped' add()?

javascript - Angular UI-GRID 不在页面上显示网格

javascript - AngularJS - 使用 $resource - 为什么我的控制台日志中有这么多条目?

css - 根据从 Json 读取的信息更改 AngularJS 中元素的背景颜色

javascript - 400 Bad Request 仅使用 AngularJs,适用于 jQuery

javascript - 基于另一个数组的选择过滤数组

javascript - 如何将 onblur 和 onfocus 添加到值由选择框确定的输入框

javascript - 有条件地从数组中删除字符串

javascript - 对 ckeditor 的 contents.css 文件所做的更改未加载

javascript - 在 ReactJs 组件中的 props 上运行函数