这篇直奔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"
   }
 ]

angular+bootstrap+MVC--之一，入门的更多相关文章

  1. angular+bootstrap+MVC 之三，分页控件初级版

    今天实现一个分页控件,效果如下: 1.HTML: <!doctype html> <!--suppress ALL --> <html ng-app="appT ...

  2. angular+bootstrap+MVC 之二，模态窗

    本例实现一个bootstrap的模态窗 1.HTML代码 <!doctype html> <!--suppress ALL --> <html ng-app=" ...

  3. 【第三篇】ASP.NET MVC快速入门之安全策略（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  4. 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  5. 【第一篇】ASP.NET MVC快速入门之数据库操作（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  6. 带你初识Angular中MVC模型

    简介 MVC是一种使用 MVC(Model View Controller 模型-视图-控制器)设计模式,该模型的理念也被许多框架所吸纳,比如,后端框架(Struts.Spring MVC等).前端框 ...

  7. 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记

    <疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...

  8. 【第四篇】ASP.NET MVC快速入门之完整示例（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  9. 使用angular.bootstrap() 完成模块的手动加载

    之前我们看到使用ng-app指令,可以实现模块的自动加载.现在我们看下,angular中如何手动加载模块.需要使用到angular.bootstrap这个函数. <html> <he ...

  10. Spring Mvc的入门

    SpringMVC也叫Spring Web mvc,属于表现层的框架.Spring MVC是Spring框架的一部分,是在Spring3.0后发布的. Spring Web MVC是什么: Sprin ...

随机推荐

  1. Laravel 流程分析——整体概论

    从整体上来看(不考虑细节),Laravel流程相当简单,我们分析一下index.php文件(下面的第几行为实际代码,不是指文件的行) 第一行定义自动加载 require __DIR__.'/../bo ...

  2. Django URL传递参数的方法总结(转)

    1 无参数情况 配置URL及其视图如下: 1 2 3 4 (r'^hello/$', hello)   def hello(request): return HttpResponse("He ...

  3. Ubuntu 安装桌面且远程连接

    前言:  一般服务器是不装桌面的,因为会牺牲很多性能,这里就选择很小桌面,牺牲一定性能  这里就采用x2go, 这里是在ubuntu server 14.04 安装成功,其实它是可用于linux所有  ...

  4. TabControl控件的DrawItem事件怎么注册

    只有DrawMode等于OwnerDrawFixed时,才会在绘制选项卡时发生DrawItem事件tabControl1.DrawMode = TabDrawMode.OwnerDrawFixed;

  5. C#窗体 WinForm 文件操作

    文件及文件夹操作 C/S:WinForm可以操作客户端文件 Client ServerB/S:浏览器服务 Brower Server 命名空间:using system .IO; 1. File类:文 ...

  6. Windows Store App 获取文件及文件夹列表

    通过使用13.2.1小节给出的方法和属性,不仅可以对用户库中的文件和文件夹进行操作,还可以获取其中所有的文件或者文件夹,比如为了完整地展现整个音乐库,可以获取并列举出音乐库中所有的音乐文件,以便能够在 ...

  7. dos2unix，去掉Linux下文件中的^M

    Windows系统下使用VS2010编写好的CPP文件,想放到Linux上进行编译.发现Linux上文件中的每行代码末尾都跟着^M这个符号. 为什么同一份文件在windows上和Linux上显示的不一 ...

  8. 在FireFox中修改cookie

    一.安装Firebug插件(web开发中常用的调试工具) 1.打开菜单选择[附加组件] 2.搜索firebug,点击安装 3.安装完成    二.cookie的新建与编辑 1.选择cookies标签, ...

  9. Oracle权限管理详解

    Oracle权限管理详解 转载--CzmMiao的博客生活 Oracle 权限 权限允许用户访问属于其它用户的对象或执行程序,ORACLE系统提供三种权限:Object 对象级.System 系统级. ...

  10. [转]Web3.0时代，企业知识管理新趋势

    [转自http://www.amt.com.cn/html/ManageFront/AMTPoint0/2014/0716/1370.html] Web3.0时代,企业知识管理新趋势 2014-07- ...