标签：
这篇直奔MVVM主题，本例实现一个bootstrap的下拉框。
展示了如下技术：
1、MVVM绑定(事件绑定，值绑定，循环绑定，循环绑定中嵌套事件并回传item)，
2、angul多module，
建议在webstrom下面运行
1、HTML代码
1 <!doctype html> 2 <!--suppress ALL --> 3 <html ng-app="appTow"> 4 <head> 5 <script src="angular.min.js"></script> 6 <script src="app.js"></script> 7 <script src="./Script/jquery-2.1.1.min.js"></script> 8 <link href="./Content/Plus/bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet"/> 9 <script src="./Content/Plus/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script> 10 <link href="./Skin/Default/css/site.css" rel="stylesheet"/> 11 </head> 12 <body> 13 <div ng-controller="MyController"> 14 Your name: 15 <input type="text" ng-model="username"> 16 <button ng-click=‘sayHello()‘>greet</button> 17 <hr> 18 {{greeting}} 19 </div> 20 <div ng-controller="MyController1"> 21 Your name: 22 <input type="text" ng-model="username"> 23 <button ng-click=‘sayHello()‘>greet</button> 24 <li ng-repeat="x in names"> 25 {{ x.Name}} 26 </li> 27 <table> 28 <tr> 29 <td class="ruyeeTableTDLable"><span>Names</span></td> 30 <td class="ruyeeTableDataCell"> 31 <div class="btn-group"> 32 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" 33 aria-expanded="false"> 34 <span>{{selectedItem}}</span><span class="caret"></span> 35 </button> 36 <ul class="dropdown-menu" role="menu"> 37 <li ng-repeat="x in names"> 38 <a href="#" ng-click="clickOneLi(x.Name)">{{ x.Name}}</a> 39 </li> 40 </ul> 41 </div> 42 </td> 43 </tr> 44 </table> 45 </div> 46 </body> 47 </html>
2、JS代码（app.js）
angular.module(‘appOne‘, []) .controller(‘MyController‘, function ($scope) { $scope.username = ‘World‘; $scope.sayHello = function () { $scope.greeting = ‘Hello ‘ + $scope.username + ‘!‘; }; }); angular.module(‘appTow‘, [‘appOne‘]) .controller(‘MyController1‘, function ($scope, $http) { $scope.username = ‘World002‘; $scope.sayHello = function () { $http.get("Data.json") .success(function (response) { $scope.names = response; }); }; $scope.clickOneLi = function (item) { $scope.selectedItem = item; } $scope.selectedItem = "Please select one"; }); var app = angular.module(‘myApp‘, []); app.controller(‘customersCtrl‘, function ($scope, $http) { $http.get("Data.json") .success(function (response) { $scope.names = response; }); });
3、Json文件(Data.json)
1 [ 2 { 3 "Name" : "Alfreds Futterkiste", 4 "City" : "Berlin", 5 "Country" : "Germany" 6 }, 7 { 8 "Name" : "Berglunds snabbk?p", 9 "City" : "Lule?", 10 "Country" : "Sweden" 11 }, 12 { 13 "Name" : "Centro comercial Moctezuma", 14 "City" : "México D.F.", 15 "Country" : "Mexico" 16 }, 17 { 18 "Name" : "Ernst Handel", 19 "City" : "Graz", 20 "Country" : "Austria" 21 }, 22 { 23 "Name" : "FISSA Fabrica Inter. Salchichas S.A.", 24 "City" : "Madrid", 25 "Country" : "Spain" 26 }, 27 { 28 "Name" : "Galería del gastrónomo", 29 "City" : "Barcelona", 30 "Country" : "Spain" 31 }, 32 { 33 "Name" : "Island Trading", 34 "City" : "Cowes", 35 "Country" : "UK" 36 }, 37 { 38 "Name" : "K?niglich Essen", 39 "City" : "Brandenburg", 40 "Country" : "Germany" 41 }, 42 { 43 "Name" : "Laughing Bacchus Wine Cellars", 44 "City" : "Vancouver", 45 "Country" : "Canada" 46 }, 47 { 48 "Name" : "Magazzini Alimentari Riuniti", 49 "City" : "Bergamo", 50 "Country" : "Italy" 51 }, 52 { 53 "Name" : "North/South", 54 "City" : "London", 55 "Country" : "UK" 56 }, 57 { 58 "Name" : "Paris spécialités", 59 "City" : "Paris", 60 "Country" : "France" 61 }, 62 { 63 "Name" : "Rattlesnake Canyon Grocery", 64 "City" : "Albuquerque", 65 "Country" : "USA" 66 }, 67 { 68 "Name" : "Simons bistro", 69 "City" : "K?benhavn", 70 "Country" : "Denmark" 71 }, 72 { 73 "Name" : "The Big Cheese", 74 "City" : "Portland", 75 "Country" : "USA" 76 }, 77 { 78 "Name" : "Vaffeljernet", 79 "City" : "?rhus", 80 "Country" : "Denmark" 81 }, 82 { 83 "Name" : "Wolski Zajazd", 84 "City" : "Warszawa", 85 "Country" : "Poland" 86 } 87 ]
一起学习angular+bootstrap+MVC--之一，入门
标签：
原文地址：http://www.cnblogs.com/badnewfish/p/4899296.html
