top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

How to write select statement in Angular JS?

0 votes
309 views
How to write select statement in Angular JS?
posted Jun 12, 2017 by Madhavi Kumari

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

1 Answer

0 votes

The Super Simple Version

Starting with a basic array of ints and an integer variable (app and controller setup too)

    var myApp = angular.module('myApp', []);

    myApp.controller('myAppCtrl', function($scope) {

      $scope.SimpleData =[1,2,3,4];
      $scope.SimpleSelectedData = 3;
    }


    <select ng-model="SimpleSelectedData" >
        <option ng-repeat="item in SimpleData" ng-selected="{{item==SimpleSelectedData}}" value="{{item}}">{{item}}</option>
      </select>


var myApp = angular.module('myApp', []);

myApp.controller('myAppCtrl', function($scope) {

  $scope.SimpleData =[1,2,3,4];
  $scope.SimpleSelectedData = 3;
}




<select ng-model="SimpleSelectedData" >
    <option ng-repeat="item in SimpleData" ng-selected="{{item==SimpleSelectedData}}" value="{{item}}">{{item}}</option>
  </select>

Notice that the select is bound to the $scope.SimpleSelectedData using ng-model=”SimpleSelectedData” and option contains the ng-repeat which is bound to the array in $scope.SimpleData. The selected item is set by using ng-selected in the option and is compared to what is found in $scope.SimpleSelectedData. Last, the value and display of the option are set to the value of each item being iterated through during ng-repeat. This method works nicely for data that are native types like int or string but shouldn’t be used if you are using objects.

The ng-option Version

A few things to remember at this point that are important:

ng-options can be set up as a string with all the information needed to create your select items. example (“item as item.somevalue for item.somevalue in mycollection track by item.somevalue”).
ng-model compares by reference, not value. So if you have an object to be used as ng-model and it does not point to an element in the collection being used for the options you will want to use track by to specify the property name to use for the default value comparison.

  var myApp = angular.module('myApp', []);

    myApp.controller('myAppCtrl', function($scope) {

$scope.StateList = [
        {
            "Id": 1,
            "Code": "AL",
            "Name": "Alabama"
        },
        {
            "Id": 2,
            "Code": "AK",
            "Name": "Alaska"
        },
        {
            "Id": 3,
            "Code": "AZ",
            "Name": "Arizona"
        },
        {
            "Id": 4,
            "Code": "AR",
            "Name": "Arkansas"
        }]

    $scope.Address = {
        "Address1": "123 Maple" ,
        "City": "Tempe",
        "State": "AZ",
        "ZipCode": 89234,
        "Country": US
    }


      <select ng-model="Address.State" 
      ng-options="state as (state.Code) for state in StateList track by state.Code">
      </select>
  var myApp = angular.module('myApp', []);

    myApp.controller('myAppCtrl', function($scope) {

$scope.StateList = [
        {
            "Id": 1,
            "Code": "AL",
            "Name": "Alabama"
        },
        {
            "Id": 2,
            "Code": "AK",
            "Name": "Alaska"
        },
        {
            "Id": 3,
            "Code": "AZ",
            "Name": "Arizona"
        },
        {
            "Id": 4,
            "Code": "AR",
            "Name": "Arkansas"
        }]

    $scope.Address = {
        "Address1": "123 Maple" ,
        "City": "Tempe",
        "State": "AZ",
        "ZipCode": 89234,
        "Country": US
    }


      <select ng-model="Address.State" 
      ng-options="state as (state.Code) for state in StateList track by state.Code">
      </select>

A few things to notice are that the element state can be displayed in the “as” part of this statement. The code property of the state object is what is being displayed in the select list. In the next example I will show how to use a filter for this display field.

Using a Filter for your Options

Using a filter on your collection is a powerful way to format, select a subset of data and add other logic that gets you the data you want in your select control. Here is a simple example of using a filter to reformat the display label on the select. All the code from above still applies but I will be adding a filter and changing the select’s ng-options statement.

  myApp.filter('stateName', function() {
      return function(itm) {
        return [itm.Name , itm.Code, itm.Id].join(" ,");
  };

//html for the select

  myApp.filter('stateName', function() {
      return function(itm) {
        return [itm.Name , itm.Code, itm.Id].join(" ,");
  };

//html for the select

So you will notice that the as statement is followed by the state object and a pipe and the name of the filter. The filter then returns a string from the itm object passed in to be used to display the values you need in the select.

On select event

It is very hand to have an event function for when something is selected so you can’t take action based on this event. So no example would be complete without how to hook this up.

//inside the controller declare a function to be called when the select event is called

$scope.OnSelectEvent = function(itm){
    //do some stuff now that the selection event has been fired

}

//small change to the html to add the ng-onchange

<select ng-model="Address.State" ng-change="update()"
        ng-options="state.Code as (state|stateName) for state in StateList">
      </select>

//inside the controller declare a function to be called when the select event is called

$scope.OnSelectEvent = function(itm){
    //do some stuff now that the selection event has been fired

}

//small change to the html to add the ng-onchange

<select ng-model="Address.State" ng-change="update()"
        ng-options="state.Code as (state|stateName) for state in StateList">
      </select>
answer Jul 26, 2017 by Manikandan J
Similar Questions
+1 vote

I have a group of array in $scope.firstorder. For example:

enter image description here

Based on some condition like array contains an element Quantity. If Qunatity is zero i need to remove this array from the list of arrays.

How can I do that?

 for (index in $scope.firstorder)
    {
        var quantity = $scope.firstorder[index][0].Quantity;
        if (quantity == 0)
        {
            Remove the array element from $scope.firstOrder;
        } 


    }
...