Empty first element in dropdown list

后端未结

关注

 6  2056

I am quite a beginner with AngularJS and currently I am working on a web application in Django where I use AngularJS for the frontend part i can say. My problem is that the

相关标签:

6条回答

一个人的身影

2020-12-25 11:18
You can use a specific syntax for <select> tags with Angularjs.

Inspired from the documentation page:
```
<select id="sel" class="input-block-level" ng-model="list_category" ng-options="obj.name for obj in list_categories.data">
    <option value="Other">Other</option>
</select>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
小鲜肉

2020-12-25 11:23
Use the directive ng-options and remove the value from the 'Other' option, like this:
```
<select id="sel" class="input-block-level" ng-model="list_category" ng-options="obj.id as obj.name for obj in list_categories.data">    
    <option value="">Other</option>
</select>
```
This ensures that if list_category is empty (no entry selected), the 'Other' option is selected (by default).

jsFiddle: http://jsfiddle.net/bmleite/gkJve/
0 讨论(0)
发布评论:

提交评论
- 加载中...
南方客

2020-12-25 11:25
Here's some code directly from the AngularJs.org website about select lists:
```
<select ng-model="color" ng-options="c.name for c in colors"></select>
```
First, as you can see, you don't need to use the ng-repeat to build your options list. Angular is going to basically let you do a foreach loop on a collection to build your option list. Second, you have the ng-model which is on the select, but isn't the same as your collections name. This is going to be your item which is actually collected at post time .
```
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]; // red
}
```
Okay, and here's the javascript controller code. $scope.colors is the collection and $scope.color is the model property which has been assigned to the select list in the html. As you can see from this example the model property is being given a default starting value of the third option in the array. For you, this can be set from the http.get you're using for loading up your page initally.

Now when you're doing the foreach, you're basically grabbing the 'name' value from the collection and you're saying 'show this value' in the dropdown and use this value on the post. By having that inital model property set, you should be able to avoid having an empty option field in your drop down list.

Reference: AngularJS Select
0 讨论(0)
发布评论:

提交评论
- 加载中...
名媛妹妹

2020-12-25 11:30
in my opinion this answer is cleaner:
```
$scope.form = {type : $scope.typeOptions[0].value};
```
http://jsfiddle.net/MTfRD/2010/
0 讨论(0)
发布评论:

提交评论
- 加载中...
南方客

2020-12-25 11:33
The Blank empty option on top of drop down will appear if you have set ng-model with some value which is not contained in the list options created after the ng-Repeat. Now if you consider the original post and remove the ng-model or set some valid value in ng-model, it will work fine or you can set selected first item as
```
$scope.list_category = $scope.list_categories.data[0].id;
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

孤街浪徒

2020-12-25 11:39

Find the below working example below you should avoid ng-repeat with options so please see below sample code with

<body ng-controller="testcontroller">
         <select ng-model="item" ng-options="item.ID as item.Title for item in items">
         </select>
            <span>{{item}}</span>
    </body>

App.controller('testcontroller', function ($scope) {
    $scope.item = '000001';
    $scope.items = [
      { ID: '000001', Title: 'Chicago' },
      { ID: '000002', Title: 'New York' },
      { ID: '000003', Title: 'Washington' }
    ];
});

0 讨论(0)