这篇直奔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. 有关于psExec的使用

    psExec是微软pstools工具包中最常用的一个工具,也是在内网渗透中的免杀渗透利器. psExec能够在命令行下在对方没有开启telnet服务的时候返回一个半交互的命令行,像telnet客户端一 ...

  2. CPU的高速缓存存储器知识整理

    基于缓存的存储器层次结构 基于缓存的存储器层次结构行之有效,是因为较慢的存储设备比较快的存储设备更便宜,还因为程序往往展示局部性: 时间局部性:被引用过一次的存储器的位置很可能在不远的将来被再次引用. ...

  3. JavaScript的Date对象

    整理了一些JavaScript时间的对象,如下所示: toLocaleString()得到当前的年月日和时间的字符串 toLocaleTimeString() 得到当前的时间字符串 toLocaleD ...

  4. 使用jQuery Mobile的注意事项（译）

    翻译编辑自:http://www.appnovation.com/blog/7-things-know-about-jquery-mobile-working-it 一.Android和IOS的内置键 ...

  5. dpkg命令的用法

    dpkg 是Debian package的简写,为”Debian“ 操作系统 专门开发的套件管理系统,用于软件的安装,更新和移除. 所有源自"Debian"的Linux的发行版都使 ...

  6. at

    1.这个命令对于自己建立的虚拟机很有帮助,比如你想过半个小时关机: [root@oc3408554812 ~]# at now + 30 minutesat> cd /tmp -h nowat& ...

  7. 无任何网络提供程序接受指定的网络路径(系统服务里没有workstation服务)

    今天同事访问公司服务器时,提示“无任何网络提供程序接受指定的网络路径”,网络ping正常,把防火墙关掉,再次尝试问题如故. 于是上网搜索: 1.服务停止:一般有workstation,server,c ...

  8. 支持GPS的核心API

    Android为GPS功能支持专门提供了一个LocationManager类,它的作用于TelephonyManager.AudioManager等服务类的作用相似,所有GPS定位相关的服务.对象都将 ...

  9. sql server 子找父和父找子

    父找子 with RTD1 as( select Id,pid from Sys_XCode ), RTD2 as( select * from RTD1 where id=1 union all s ...

  10. 初学者SQL语句介绍

    初学者SQL语句介绍      1.用 Select 子句检索记录    Select 子句是每一个检索数据的查询核心.它告诉数据库引擎返回什么字段.    Select 子句的常见形式是:    S ...