这篇直奔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 ]
时间： 2024-10-19 02:16:49