如何使用ng-option设置select元素的默认值

11 回答

• 123

  <select name='partyid' id="partyid" class='span3'>
  <option value=''>Select Party</option>
  <option ng-repeat="item in partyName" value="{{item._id}}" ng-selected="obj.partyname == item.partyname">{{item.partyname}}
  </option>
  </select>
  

  回复于 2024-05-08T23:56:41+08:00
• 67

  angular documentation for select *没有明确回答这个问题，但它就在那里 . 如果你看 script.js ，你会看到：

  function MyCntrl($scope) {
    $scope.colors = [
      {name:'black', shade:'dark'},
      {name:'white', shade:'light'},
      {name:'red', shade:'dark'},
      {name:'blue', shade:'dark'},
      {name:'yellow', shade:'light'}
    ];
    $scope.color = $scope.colors[2]; // Default the color to red
  }
  

  这是html：

  <select ng-model="color" ng-options="c.name for c in colors"></select>
  

  这似乎是使用 ng-options 在 <select> 上默认选定值的更明显方法 . 如果您有不同的标签/值，它也会起作用 .

  * 这是来自Angular 1.2.7

  回复于 2024-05-08T23:56:41+08:00
• 3

  假设该对象在您的范围内：

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

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

  工作Plunkr：http://plnkr.co/edit/wTRXZYEPrZJRizEltQ2g

  回复于 2024-05-08T23:56:41+08:00
• 21

  当您从数据库中提取数据，进行修改然后保留更改时，此答案更有用 .

  <select  ng-options="opt.id as opt.name for opt in users" ng-model="selectedUser"></select>
  

  查看此处的示例：

  http://plnkr.co/edit/HrT5vUMJOtP9esGngbIV

  回复于 2024-05-08T23:56:41+08:00
• 1

  如果您的对象数组很复杂，如：

  $scope.friends = [{ name: John , uuid: 1234}, {name: Joe, uuid, 5678}];
  

  而您当前的模型设置为：

  $scope.user.friend = {name:John, uuid: 1234};
  

  它有助于在uuid（或任何唯一字段）上使用 track by 函数，只要ng-model = "user.friend"也有一个uuid：

  <select ng-model="user.friend" 
  ng-options="friend as friend.name for friend in friends track by friend.uuid"> 
  </select>
  

  回复于 2024-05-08T23:56:41+08:00
• 21

  我挣扎了几个小时，所以我想为它添加一些说明，这里提到的所有例子都是指从脚本本身加载数据的情况，而不是来自服务或数据库的东西，所以我想为遇到同样问题的人提供我的经验 .

  通常，您只在数据库中保存所需选项的ID，所以......让我们展示它

  service.js

  myApp.factory('Models', function($http) {
  var models = {};
  models.allModels = function(options) {
      return $http.post(url_service, {options: options});
  };
  
  return models;
  });
  

  controller.js

  myApp.controller('exampleController', function($scope, Models) {
  $scope.mainObj={id_main: 1, id_model: 101};
  $scope.selected_model = $scope.mainObj.id_model;
  Models.allModels({}).success(function(data) {
      $scope.models = data; 
  });
  });
  

  最后是部分html model.html

  Model: <select ng-model="selected_model" 
  ng-options="model.id_model as model.name for model in models" ></select>
  

  基本上我想指出那块“model.id_model作为model.name for model in model in model " the " model.id_model " uses the id of the model for the value so that you can match with the " mainObj.id_model " which is also the " selected_model ", this is just a plain value, also " as model.name " is the label for the repeater, finally " model in models”就是我们都知道的常规周期 .

  希望这有助于某人，如果有，请投票：D

  回复于 2024-05-08T23:56:41+08:00
• 8

  <select id="itemDescFormId" name="itemDescFormId" size="1" ng-model="prop" ng-change="update()">
      <option value="">English(EN)</option>
      <option value="23">Corsican(CO)</option>
      <option value="43">French(FR)</option>
      <option value="16">German(GR)</option>
  

  只需添加空值选项即可 . 它会工作 .

  DEMO Plnkr

  回复于 2024-05-08T23:56:41+08:00
• 37

  更简单的方法是使用data-ng-init这样：

  <select data-ng-init="somethingHere = options[0]" data-ng-model="somethingHere" data-ng-options="option.name for option in options"></select>
  

  这里的主要区别是你需要包括 data-ng-model

  回复于 2024-05-08T23:56:41+08:00
• 0

  ng-model属性设置选定的选项，并允许您管理像orderBy：orderModel.value这样的过滤器

  index.html

  <select ng-model="orderModel" ng-options="option.name for option in orderOptions"></select>
  

  controllers.js

  $scope.orderOptions = [
      {"name":"Newest","value":"age"},
      {"name":"Alphabetical","value":"name"}
  ];
  
  $scope.orderModel = $scope.orderOptions[0];
  

  回复于 2024-05-08T23:56:41+08:00
• 10

  如果有人在Chrome，IE 10/11，Firefox的页面上偶尔没有填充默认值，请尝试将此属性添加到输入/选择字段中，检查HTML中的填充变量，如下所示：

  <input data-ng-model="vm.x" data-ng-if="vm.x !== '' && vm.x !== undefined && vm.x !== null" />
  

  回复于 2024-05-08T23:56:41+08:00
• 10

  如果您不关心使用某个数字ID索引选项，那真的很简单 .

  • 声明你的$ scope var - people数组

  $scope.people= ["", "YOU", "ME"];
  

  • 在上述范围的DOM中，创建对象

  <select ng-model="hired" ng-options = "who for who in people"></select>
  

  • 在控制器中，将ng-model设置为“已租用” .

  $scope.hired = "ME";
  

  祝好运！！！这真的很容易！

  回复于 2024-05-08T23:56:41+08:00