144

我正在使用 Angular JS，我需要使用 Angular JS 设置下拉列表控件的选定选项。如果这很荒谬，请原谅我，但我是 Angular JS 的新手

这是我的html的下拉列表控件

 <select ng-required="item.id==8 && item.quantity > 0" name="posterVariants"
   ng-show="item.id==8" ng-model="item.selectedVariant" 
   ng-change="calculateServicesSubTotal(item)"
   ng-options="v.name for v in variants | filter:{type:2}">
  </select>

在它被填充后，我得到

 <select ng-options="v.name for v in variants | filter:{type:2}" ng-change="calculateServicesSubTotal(item)"
ng-model="item.selectedVariant" ng-show="item.id==8" name="posterVariants"
ng-required="item.id==8 &amp;&amp; item.quantity &gt; 0" class="ng-pristine ng-valid ng-valid-required">
    <option value="?" selected="selected"></option>
    <option value="0">set of 6 traits</option>
    <option value="1">5 complete sets</option>
</select>

如何设置value="0"要选择的控件？

4

9 回答 9

195

I hope I understand your question, but the ng-model directive creates a two-way binding between the selected item in the control and the value of item.selectedVariant. This means that changing item.selectedVariant in JavaScript, or changing the value in the control, updates the other. If item.selectedVariant has a value of 0, that item should get selected.

If variants is an array of objects, item.selectedVariant must be set to one of those objects. I do not know which information you have in your scope, but here's an example:

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>

This would leave the "b" item to be selected.

于 2013-07-31T11:36:33.773 回答
35

我不知道这是否会对任何人有所帮助，但当我面临同样的问题时，我想分享我是如何获得解决方案的。

您可以在ng-options.

假设你有：

variants:[{'id':0, name:'set of 6 traits'}, {'id':1, name:'5 complete sets'}]

您可以提及您的ng-options身份：

ng-options="v.name for v in variants track by v.id"

希望这对将来的人有所帮助。

于 2016-05-09T17:25:12.250 回答
7

如果您为其分配值 0，item.selectedVariant则应自动选择它。查看http://docs.angularjs.org/api/ng.directive:select上的示例，默认情况下通过简单地分配选择红色$scope.color='red'。

于 2013-07-31T11:38:25.130 回答
7

我在这里看到已经写了很好的答案，但有时以其他形式写同样的答案可能会有所帮助

<div ng-app ng-controller="MyCtrl">
  <select ng-model="referral.organization" ng-options="c for c in organizations"></select>
</div>

<script type='text/javascript'>
  function MyCtrl($scope) {
    $scope.organizations = ['a', 'b', 'c', 'd', 'e'];
    $scope.referral = {
      organization: $scope.organizations[2]
    };
  }
</script>
于 2015-10-11T09:45:42.053 回答
2

简单的方法

如果您有一个用户作为响应或您定义的数组/JSON，首先您需要在控制器中设置选定的值，然后在 html 中放置相同的模型名称。我写的这个例子以最简单的方式解释。 控制器内部的
简单示例：

$scope.Users = ["Suresh","Mahesh","Ramesh"]; 
$scope.selectedUser = $scope.Users[0];

你的 HTML

<select data-ng-options="usr for usr in Users" data-ng-model="selectedUser">
</select>


控制器内部的复杂示例：

$scope.JSON = {
       "ResponseObject":
           [{
               "Name": "Suresh",
               "userID": 1
           },
           {
               "Name": "Mahesh",
               "userID": 2
           }]
   };
   $scope.selectedUser = $scope.JSON.ResponseObject[0];

你的 HTML

<select data-ng-options="usr.Name for usr in JSON.ResponseObject" data-ng-model="selectedUser"></select>
<h3>You selected: {{selectedUser.Name}}</h3>
于 2016-06-22T08:46:10.170 回答
1

它可能很有用。绑定并不总是有效。

<select id="product" class="form-control" name="product" required
        ng-model="issue.productId"
        ng-change="getProductVersions()"
        ng-options="p.id as p.shortName for p in products">
</select>

例如。您从 rest-service 填充选项列表源模型。所选值在填充列表之前已知并已设置。使用 $http list 选项执行 rest-request 后完成。但未设置选定的选项。由于未知原因，AngularJS 在影子 $digest 中执行未按应有的方式选择绑定。我必须使用 JQuery 来设置选中。这很重要！阴影中的 Angular 将前缀添加到由 ng-repeat optinos 生成的 attr“值”的值。对于 int，它是“数字：”。

$scope.issue.productId = productId;
function activate() {
   $http.get('/product/list')
     .then(function (response) {
       $scope.products = response.data;

       if (productId) {
           console.log("" + $("#product option").length);//for clarity                       
           $timeout(function () {
               console.log("" + $("#product option").length);//for clarity
               $('#product').val('number:'+productId);
               //$scope.issue.productId = productId;//not work at all
           }, 200);
       }
   });
}
于 2017-03-09T15:21:44.613 回答
0

尝试以下操作：

JS文件

this.options = { 
        languages: [{language: 'English', lg:'en'}, {language:'German', lg:'de'}]
};
console.log(signinDetails.language);

HTML 文件

<div class="form-group col-sm-6">
    <label>Preferred language</label>
    <select class="form-control" name="right" ng-model="signinDetails.language" ng-init="signinDetails.language = options.languages[0]" ng-options="l as l.language for l in options.languages"><option></option>
    </select>
</div>
于 2018-01-12T14:53:56.347 回答
0

JS：

$scope.options = [
  {
    name: "a", 
    id: 1 
  },
  {
    name: "b",
    id: 2 
  }
];
$scope.selectedOption = $scope.options[1];
于 2019-08-01T10:44:26.863 回答
-1

这是我用于设置选定值的代码

countryList: any = [{ "value": "AF", "group": "A", "text": "Afghanistan"}, { "value": "AL", "group": "A", "text": "Albania"}, { "value": "DZ", "group": "A", "text": "Algeria"}, { "value": "AD", "group": "A", "text": "Andorra"}, { "value": "AO", "group": "A", "text": "Angola"}, { "value": "AR", "group": "A", "text": "Argentina"}, { "value": "AM", "group": "A", "text": "Armenia"}, { "value": "AW", "group": "A", "text": "Aruba"}, { "value": "AU", "group": "A", "text": "Australia"}, { "value": "AT", "group": "A", "text": "Austria"}, { "value": "AZ", "group": "A", "text": "Azerbaijan"}];
 
 
 for (var j = 0; j < countryList.length; j++) {
      //debugger
      if (countryList[j].text == "Australia") {
          console.log(countryList[j].text); 
          countryList[j].isSelected = 'selected';
      }
      }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<label>Country</label>
<select class="custom-select col-12" id="Country" name="Country"   >
<option value="0" selected>Choose...</option>
<option *ngFor="let country of countryList" value="{{country.text}}" selected="{{country.isSelected}}"   > {{country.text}}</option>
</select>

在有角度的框架上试试这个

于 2019-06-05T04:23:25.957 回答