Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Empty first element in dropdown list

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 dropdown list which is populated with objects from a scope always start with a blank element (if i select one from the list, the issue is gone). This create problems because if the user doesn't select anything the POST request normally it will not work anymore. I would like to know how to have something like a preselected value or something similar. Here's part of my code:

Select tag:

<select id="sel" class="input-block-level" ng-model="list_category">
            <option ng-repeat="obj in list_categories.data" value="{{obj.id}}">{{obj.name}}</option>
            <option value="Other">Other</option>
        </select>

$scope.list_categories:

var listcategoryPromise = ListCategory.get();
    listcategoryPromise.then(function(response) {
        $scope.list_categories = {
            meta : response.data.meta,
            data : response.data.objects
        };
    });
like image 273
MariusNV Avatar asked Feb 05 '13 11:02

MariusNV


4 Answers

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/

like image 168
bmleite Avatar answered Oct 07 '22 23:10

bmleite


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' }
    ];
});
like image 27
Ajay Beniwal Avatar answered Oct 07 '22 23:10

Ajay Beniwal


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>
like image 20
maxdec Avatar answered Oct 07 '22 22:10

maxdec


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

like image 30
Chris Avatar answered Oct 07 '22 21:10

Chris