AngularJS Bind & Get Dropdown Value and Text
00:05
Introduction
In this atricles I want to show how to fill dropdown using ng-option and how to get value and text using ng-change.HomeController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace AngularJSPassDropDownValueText.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/js/angular.min.js"></script>
<script src="~/js/controller.js"></script>
<style>
span{width:100px;padding:15px;font-family:Verdana;font-size:15px;font-weight:bold;}
select{width:200px;padding:5px;font-family:Verdana;font-size:15px;font-weight:bold;}
</style>
</head>
<body ng-controller="testController as testCtrl">
<div style="margin-left:40%;margin-top:10%;background-color:silver;width:300px;height:100px;padding:10px;">
<div>
<select ng-options="val.Name for val in testCtrl.dropDownList" ng-model="testCtrl.ddlList" ng-change="testCtrl.ddlChange()">
<option value="">--Select--</option>
</select>
</div>
<div style="clear:both;"></div>
<div>
<span>Value:</span>
<span>{{testCtrl.ddlChangeValue}}</span>
</div>
<div style="clear:both;"></div>
<div>
<span>Text: </span>
<span>{{testCtrl.ddlChangeText}}</span>
</div>
</div>
</body>
</html>
Controller.js
var app = angular.module('myApp', []);
app.controller('testController', function ($scope) {
var testCtrl = this;
testCtrl.dropDownList = [
{
ID: '1',
Name: 'Surajit GHosh'
}, {
ID: '2',
Name: 'Sourav Mondal'
}, {
ID: '3',
Name: 'Sankar Parida'
}, {
ID: '4',
Name: 'Sayan Bose'
}, {
ID: '5',
Name: 'Amit Bhunia'
}, {
ID: '6',
Name: 'Shantanu Nag'
}, {
ID: '7',
Name: 'Abhijit Bera'
}, {
ID: '8',
Name: 'Nihar Sahu'
}, {
ID: '9',
Name: 'Asis Bera'
}, {
ID: '10',
Name: 'Vivek Sha'
}];
testCtrl.ddlChange = function () {
testCtrl.ddlChangeValue = testCtrl.ddlList.ID;
testCtrl.ddlChangeText = testCtrl.ddlList.Name;
}
});
After run the screen will show like this:
0 comments