这篇直奔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. JavaWeb基础: ServletConfig

    基本概念 ServletConfig用于配置Servlet的参数:在Servlet的配置文件中,可以使用一个或者是多个<init-param> 标签为Servlet配置一些初始化参数.当有 ...

  2. webstorm 注册码，亲测可用

    WebStorm注册码 User Name: EMBRACE License Key: ===== LICENSE BEGIN ===== 24718-12042010 00001h6wzKLpfo3 ...

  3. linux 下mysql 字段插入的值超过 预设大小报错

    其原因 是 STRICT_TRANS_TABLES  决定了 如果超出字段大小,则不会截取 ,直接报错. 到/etc/my.cnf   删除 STRICT_TRANS_TABLES   就可以了 sq ...

  4. log4net.redis+logstash+kibana+elasticsearch+redis 实现日志系统

    前端时间写了个随笔 log4net.NoSql +ElasticSearch 实现日志记录 ,因项目原因需要把日志根java平台的同事集成采用logstash+kibana+elasticsearch ...

  5. [双连通分量] POJ 3177 Redundant Paths

    Redundant Paths Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 13712   Accepted: 5821 ...

  6. juery常用

    1input解除焦点时触发操作 同时给另一个元素赋值 $(document).ready(function(){ $("input[name='url']").change(fun ...

  7. 将HTML文本框设为不可编辑文本框。

    将HTML文本框设为不可编辑文本框. 方法1: onfocus=this.blur() <input type="text" name="input1" ...

  8. libdispatch for Linux

    这个Dispatch是苹果的一个高效的处理库,它在ubuntu上的安装如下: Build/Runtime Requirements 如下: libBlocksRuntime libpthread_wo ...

  9. JVM-类加载机制

    虚拟机类加载机制  虚拟机把描述的类的数据从class文件加载到内存后,并对数据进行校验,转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这就是虚拟机的类加载机制.  类加载的时机 类被 ...

  10. Joomla 文件操作常用方法

    今天介绍下joomla下文件操作常用方法,这些方法在文件读写,图片文件上传,等都有用处. jimport('joomla.filesystem.file'); $j = new JFile(); ge ...