这篇直奔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. 0505 Scrum 项目1.0

    应用NABCD模型,分析你们初步选定的项目,充分说明你们选题的理由. 录制为演说视频,上传到视频网站,并把链接发到团队博客上. 团队项目选题  一个售书网站(O2O) NABCD 模型 1) N (N ...

  2. 转-Asp.Net MVC及Web API框架配置会碰到的几个问题及解决方案

    前言 刚开始创建MVC与Web API的混合项目时,碰到好多问题,今天拿出来跟大家一起分享下.有朋友私信我问项目的分层及文件夹结构在我的第一篇博客中没说清楚,那么接下来我就准备从这些文件怎么分文件夹说 ...

  3. WinForm窗体更新程序

    流程介绍: 打包参阅:WinForm程序打包说明    图一    图二    图三   实现步骤: 主程序 1.检测是否连上ftp服务器 1.1 连接不上,不检测. 1.2 连接上,如果有更新进程, ...

  4. UE3植被工具-支持刷Actor）

    [目标] 植被工具-刷Actor [思路] 1 添加类型FFoliageMeshInfo.AddInstance 的函数 2 添加Instance就直接SpawnActor 3 类结构 4 修改的函数 ...

  5. Android Studio插件推荐(PreIOC,GsonFormat)

    好的插件能加快项目的开发速度,尤其是一些针对重复性的代码的插件,所以在这里向大家推荐2款不错的插件,如果以后发现新的好的插件,还会继续推荐,同时欢迎大家推荐 GsonFormat GsonFormat ...

  6. 史上最全的RunLoop介绍

    之前有人在后台给小编留言,说:小编啥时候给我们分享RunLoop的一些文章,工作以后特别需要这样的技术.这不,小编从网上找了一个介绍非常详细,清晰的文章,仅供参考. RunLoop 是 iOS 和 O ...

  7. Node.js 路由

    我们要为路由提供请求的URL和其他需要的GET及POST参数,随后路由需要根据这些数据来执行相应的代码. 因此,我们需要查看HTTP请求,从中提取出请求的URL以及GET/POST参数.这一功能应当属 ...

  8. Linux(Ubuntu) 和 Python 常用命令

    Linux: pwd: check current directory touch f1 f2 f3: create three empty files tree dir/: show the lev ...

  9. MyJni

    package com.baidu.jnitest; import android.os.Bundle; import android.app.Activity; import android.vie ...

  10. Get请求编码

    遇到get请求中文编码的时候,有的人会采用在Tomcat/conf/server.xml中的如下添加一句: <Connector port="8080" protocol=& ...