这篇直奔MVVM主题，本例实现一个bootstrap的下拉框。
展示了如下技术：
1、MVVM绑定(事件绑定，值绑定，循环绑定，循环绑定中嵌套事件并回传item)，
2、angul多module，
建议在webstrom下面运行
1、HTML代码
<!doctype html>
<!--suppress ALL -->
<html ng-app="appTow">
<head>
<script src="angular.min.js"></script>
<script src="app.js"></script>
<script src="./Script/jquery-2.1.1.min.js"></script>
<link href="./Content/Plus/bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="./Content/Plus/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
<link href="./Skin/Default/css/site.css" rel="stylesheet"/>
</head>
<body>
<div ng-controller="MyController">
Your name:
<input type="text" ng-model="username">
<button ng-click='sayHello()'>greet</button>
<hr>
{{greeting}}
</div>
<div ng-controller="MyController1">
Your name:
<input type="text" ng-model="username">
<button ng-click='sayHello()'>greet</button>
<li ng-repeat="x in names">
{{ x.Name}}
</li>
<table>
<tr>
<td class="ruyeeTableTDLable"><span>Names</span></td>
<td class="ruyeeTableDataCell">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
aria-expanded="false">
<span>{{selectedItem}}</span><span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="x in names">
<a href="#" ng-click="clickOneLi(x.Name)">{{ x.Name}}</a>
</li>
</ul>
</div>
</td>
</tr>
</table>
</div>
</body>
</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)
[
{
"Name" : "Alfreds Futterkiste",
"City" : "Berlin",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbk?p",
"City" : "Lule?",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial Moctezuma",
"City" : "México D.F.",
"Country" : "Mexico"
},
{
"Name" : "Ernst Handel",
"City" : "Graz",
"Country" : "Austria"
},
{
"Name" : "FISSA Fabrica Inter. Salchichas S.A.",
"City" : "Madrid",
"Country" : "Spain"
},
{
"Name" : "Galería del gastrónomo",
"City" : "Barcelona",
"Country" : "Spain"
},
{
"Name" : "Island Trading",
"City" : "Cowes",
"Country" : "UK"
},
{
"Name" : "K?niglich Essen",
"City" : "Brandenburg",
"Country" : "Germany"
},
{
"Name" : "Laughing Bacchus Wine Cellars",
"City" : "Vancouver",
"Country" : "Canada"
},
{
"Name" : "Magazzini Alimentari Riuniti",
"City" : "Bergamo",
"Country" : "Italy"
},
{
"Name" : "North/South",
"City" : "London",
"Country" : "UK"
},
{
"Name" : "Paris spécialités",
"City" : "Paris",
"Country" : "France"
},
{
"Name" : "Rattlesnake Canyon Grocery",
"City" : "Albuquerque",
"Country" : "USA"
},
{
"Name" : "Simons bistro",
"City" : "K?benhavn",
"Country" : "Denmark"
},
{
"Name" : "The Big Cheese",
"City" : "Portland",
"Country" : "USA"
},
{
"Name" : "Vaffeljernet",
"City" : "?rhus",
"Country" : "Denmark"
},
{
"Name" : "Wolski Zajazd",
"City" : "Warszawa",
"Country" : "Poland"
}
]