这篇直奔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. linux笔记：文件系统管理-fdisk分区

    fdisk命令分区过程: 1.添加新硬盘 2.查看新硬盘: fdisk -l 3.使用fdisk命令分区: fdisk 硬盘设备文件名(如:fdisk /dev/sdb) fdisk交互指令说明: 4 ...

  2. vue学习笔记之v-if

    if顾名思义就是判断,v-if也是判断,举例如下 <p v-if="hello">Hello!</p> 这里 v-if 指令将根据表达式 hello 值的真 ...

  3. banner秒杀

    永远显示 未开始/进行中(需要用到两个for循环,第一个我没有想到,诗詹帮我写的) function timeList(){ myTime = new Date().getTime() var ite ...

  4. Yii1.1.16的安装（windows）

    下载yii1.1.16 http://pan.baidu.com/s/1mgyAOnI 解压后放到D盘,并重新命名为yii1.1.16,我是直接放在开发的目录下面 按"Window + R& ...

  5. 如何有效使用Project（1）——编制进度计划、保存基准

    1.前言: 软件产品的研发.升级.定制等,一般都是以项目的形式进行,此时项目进度计划以及资源使用情况就变成了项目经理关注的重点.如何让项目计划有效可控,及时暴露问题?如何查看资源的负荷情况,看资源分配 ...

  6. 0429 Scrum团队成立与第6-7章读后感

    Scrum团队成立: 团队名称:何首污大战污妖王 团队目标:每个人都尽可能的学到东西,共同进步. 团队口号:因为自信,所以成功! 团队照: 角色分配 产品负责人(梁毅乾): 决定开发内容和优先级排序, ...

  7. net中序列化读写xml

    参考http://www.cnblogs.com/fish-li/archive/2013/05/05/3061816.html 我们可以直接使用XmlTextReader.XmlDocument.X ...

  8. html基本标签结构

    简单的html5的基本架构 HTML全称为HyperText Markup Language,一款写给浏览器的语言. HyperText:超文本(文本,图片,视频,音频,链接) Markup Lanu ...

  9. 深入理解gradle编译-Android基础篇

    深入理解gradle编译-Android基础篇 导读 Gradle基于Groovy的特定领域语言(DSL)编写的一种自动化建构工具,Groovy作为一种高级语言由Java代码实现,本文将对Gradle ...

  10. java中的包以及内部类的介绍

    1:形式参数和返回值的问题(理解)    (1)形式参数:        类名:需要该类的对象        抽象类名:需要该类的子类对象        接口名:需要该接口的实现类对象    (2)返 ...