How to get dropdown list or select list selected value and selected text in angularJS :: asp.net mvc


We can get dropdown list selected value or text using ng-model attribute as shown in the below example

How to get dropdown list or select list selected value and selected text in angularJS asp.net mvc

        public JsonResult GetColorsData()
        {
            List<Colors> colors = new List<Colors>()
            {
                new Colors() { Id=1,Name="Red"},
                new Colors() { Id=2,Name="White"},
                new Colors() { Id=3,Name="Blue"},
                new Colors() { Id=4,Name="Green"},
            };
            return Json(colors, JsonRequestBehavior.AllowGet);
        }

@{
    ViewBag.Title = "How to get dropdown list or select list selected value and selected text in angularJS :: asp.net mvc";
}

<h3>Colors</h3>
<script src="~/Scripts/angular.min.js"></script>

<div ng-app="ddlExample">
    <div ng-controller="ddlController">

        <select ng-model="selectedColor"
                ng-options="color.Name for color in colors track by color.Id">
        </select>

        <br/>
        Selected Color Name : {{selectedColor.Name}} <br/>
        Selected Color Id : {{selectedColor.Id}}
    </div>
</div>

<script>
    angular.module('ddlExample', [])
      .controller('ddlController', ['$scope', '$http', function ($scope, $http) {
          $http({
              method: 'Get',
              url: '/Home/GetColorsData'
          }).success(function (data, status, headers, config) {
              //adding colors to model
              $scope.colors = data;
              //set selected color
              $scope.selectedColor = $scope.colors[1];
          }).error(function (data, status, headers, config) {
              $scope.message = 'Error';
          });
      }]);
</script>

Output:

Dynamic data binding to dropdown list in angularjs mvc

Happy coding…

Dynamic Data Binding AngularJS SELECT Dropdown list in asp.net MVC


Binding dropdown list or select in web application development is very importent.

we can bind data to dropdown list in angularjs in two ways

1. using ng-options

ng-options is angularJS attribute can be used to dynamically generate a list of <option> elements for the <select> element using the array or object.

Advantages of ng-options

1. Reducing memory and increasing speed by not creating a new scope for each repeated instance.

2. providing more flexibility in how the <select>‘s model is assigned via the select as part of the comprehension expression

2. using ng-repeat

ng-repeat can be used on <option> element to generate list of options

this is not preferred way of binding dropdown list or select lsit

Example using ng-options
        public JsonResult GetColorsData()
        {
            List<Colors> colors = new List<Colors>()
            {
                new Colors() { Id=1,Name="Red"},
                new Colors() { Id=2,Name="White"},
                new Colors() { Id=3,Name="Blue"},
                new Colors() { Id=4,Name="Green"},
            };
            return Json(colors, JsonRequestBehavior.AllowGet);
        }

@{
    ViewBag.Title = "Dynamic data binding to dropdown list in angularjs mvc";
}

<h3>Colors</h3>
<script src="~/Scripts/angular.min.js"></script>

<div ng-app="ddlExample">
    <div ng-controller="ddlController">
        <select ng-model="selectedColor" ng-options="color.Name for color in colors track by color.Id"></select>
        <br/>
        Selected Color : {{selectedColor.Name}}
    </div>
</div>

<script>
    angular.module('ddlExample', [])
      .controller('ddlController', ['$scope', '$http', function ($scope, $http) {
          $http({
              method: 'Get',
              url: '/Home/GetColorsData'
          }).success(function (data, status, headers, config) {
              //adding colors to model
              $scope.colors = data;
              //set selected color
              $scope.selectedColor = $scope.colors[1];
          }).error(function (data, status, headers, config) {
              $scope.message = 'Error';
          });
      }]);
</script>

 

Output:

Dynamic data binding to dropdown list in angularjs mvc

Difference between $scope and $rootScope in angularJS


The main difference is the availability of the property assigned with the object.

$rootScope

  $scope $rootScope
1. It provides local access It provides global access
2. We can have many $scope s We can have only one $rootScope
3. Cannot be used outside the controller Can be used in any controller
4. $scope is created with ng-controller $rootscope is created with ng-app
5. $scope is child object of $rootScope $rootScope is root object

 

Difference between scope and rootscope

$rootScope and $scope Example

<script src="~/Scripts/angular.min.js"></script>

<div ng-app="MyApp">
    <div class="show-scope-demo">
        <div ng-controller="GreetController">
            Hello {{name}}!
        </div>
        <div ng-controller="ListController">
            <ol>
                <li ng-repeat="name in names">{{name}} from {{department}}</li>
            </ol>
        </div>
    </div>
</div>

<script>
    angular.module('MyApp', [])
  .controller('GreetController', ['$scope', '$rootScope',
    function ($scope, $rootScope) {
        $scope.name = 'World';
        $rootScope.department = 'Angular';
    }
  ])
  .controller('ListController', ['$scope',
    function ($scope) {
        $scope.names = ['venki', 'rohit', 'ganesh'];
    }
  ]);
</script>

Output:

Hello World!

  1. venki from Angular
  2. rohit from Angular
  3. ganesh from Angular

 

Happy coding….

What is $scope in angularjs – MVC


Scope is an object that refers to the application model.

the scope will carry the data between View and controller.

The scope is simple javascript object with properties and methods.

$scope Example

@{
ViewBag.Title = “$scope”;
}
<script src=”~/Scripts/angular.min.js”></script>
<h2>$scope</h2>

<div ng-app=”myApp ng-controller=”myCtrl“>
First Name: <input type=”text” ng-model=”firstName“><br/>
Last Name: <input type=”text” ng-model=”lastName“><br/><br/>
Full Name: {{firstName + + lastName}}
</div>

<script>
var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope) {
$scope.firstName = “Venki”;
$scope.lastName = “Chikkanti”;
});
</script>

$Scope Explantiaon

MVC architecture using AngularJS

Here controller and view are using $scope to carry the data in-between.

How to consume $scope properties inside view

We can consume $scope properties inside view in two ways

1. using ng-model directive

Ex:

$scope properties :

$scope.firstName = “Venki”;
        $scope.lastName = “Chikkanti”;

using in view :

        First Name: <input type=”text” ng-model=”firstName“><br/>
        Last Name: <input type=”text” ng-model=”lastName“><br/><br/>

2. using angularJS expression

Ex:

$scope properties :

$scope.firstName = “Venki”;
        $scope.lastName = “Chikkanti”;

using in view :

First Name: {{firstName}}
        Last Name: {{lastName}}
        Full Name: {{firstName + + lastName}}

Happy coding….