今天使用angularjs的ng-options實現一個DropDownList下拉列表。

準備ASP.NET MVC的model:

?

public class MobilePhone{public int ID { get; set; }public string Name { get; set; }} Source Code

?

接下來，還得準備Entity：

?

public IEnumerable<MobilePhone> MobilePhones(){return new List<MobilePhone>(){{new MobilePhone() { ID = 1, Name = "華為" }},{new MobilePhone() { ID = 2, Name = "蘋果" }},{new MobilePhone() { ID = 3, Name = "小米" }},{new MobilePhone() { ID = 4, Name = "中興" }}};}} Source Code

?

創建ASP.NET MVC的Controller，一個是視圖Action，另一個是數據Action:

public class PhoneController : Controller{// GET: Phonepublic ActionResult Index(){return View();}public JsonResult GetMobilePhones(){MobilePhoneEntity mpe = new MobilePhoneEntity();var model = mpe.MobilePhones();return Json(model, JsonRequestBehavior.AllowGet);}} Source Code

最后，我們需要準備一個angularjs的Controller：

pilotApp.controller('PhoneCtrl', ['$http', '$location', '$rootScope', '$scope',function ($http, $location, $rootScope, $scope) {var obj = {};$http({method: 'POST',url: '/Phone/GetMobilePhones',dataType: 'json',headers: {'Content-Type': 'application/json; charset=utf-8'},data: JSON.stringify(obj),}).then(function (response) {$scope.Phones = response.data;});}] ); Source Code

?

不管是ASP.NET MVC還是AngularJs程序代碼均準備好，現在我們需要在ASP.NET MVC視圖實現下拉列表：

@{ViewBag.Title = "Index";Layout = "~/Views/Shared/_Layout.cshtml"; }<div ng-app="PilotApp" ng-controller="PhoneCtrl"><select ng-model="ddlPhones" ng-options="MobilePhone.Name for MobilePhone in Phones"></select> </div><script src="~/Angularjs/app.js"></script> <script src="~/Angularjs/PhoneController.js"></script> Source Code

?

?

上面有句ng-options綁定的表達式中，名詞所來自何處，可參考下圖指示：

?

?

動態效果演示：

?

?

總結

以上是生活随笔為你收集整理的ASP.NET MVC下使用AngularJs语言(三)：ng-options的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。