发送私信成功
为了尽快解决大伙儿的问题，请务必要找相对应的客服哦~
教你如何走进AngularJS的大门
10:21 && 浏览量（287） &&
这是我写的第一篇关于Angular.js的文章，但是我确信看完这篇文章将对你了解Angular.js的基本知识有很大的帮助。
首先需要指出什么是angular js，其实说白了angular js就是Javascript的一个类库，我们使用这个类库可以很容易的创建web页面。双向绑定是angular js其中的一个重要特征，这也是相对于其他的Javascript的类库来说angular js中很重要的特征。双向绑定即是当你修改任何属性的值的时候，相关联的html元素也将改变，你并不需要额外的去修改。
Angular js还为我们提供了MVVM(Model View ViewModel)的模型。MVVM的意思就是说Model是一个真实的对象，我们使用这个对象创建需要在页面显示的模型，并且调用视图模型。View(视图)即是我们需要输出的页面。
如果你没有使用angular js或者其它的和angular js有相似功能的类库，比如knockout.js，那么当我们编写代码的时候将会写更多更复杂的代码。所以说使用angular js编写应用程序更快更高效，并且比其它的类库更容易管理。
下面我们将通过一个简单的例子来逐渐的了解angular js。
为了更好的理解angular js的知识，我们使用asp.net作为后台的应用程序来实现简单的增删改查的操作，并且在这个例子中我们使用的是静态列表形式来展现增删改查的操作。
在数据模型中有5个属性，UserName、Address、Salary、IsMarried和Email。在视图中列出了这些属性的记录，并且在每一条数据后面都有一个删除和修改按钮。通过这些按钮我们能创建、修改和删除静态列表。
现在首先让我们了解一下以下例子中使用到的属性的含义
data-ng-app——表明这是angular 要处理的元素
data-ng-controller——指定用来处理此元素的angular 控制器
&div&id="divUserList"&data-ng-app="userApp"&data-ng-controller="userAppCtrl"&&&/div&
data-ng-bind——指定该元素绑定model中的哪个属性(上面列出的UserName、Address、Salary、IsMarried或者是Email)
&strong&data-ng-bind="UserName"&&/strong&
比如UserName是Model的属性并且将该属性绑定到定义的元素
data-ng-repeat——用来指定循环的数据
&tr&data-ng-repeat="x&in&UserData&|&limitTo:20"&&&
使用上面的语法，我们对UserData这个angular 对象属性进行循环，取出里面的数据。limitTo:20表明最多循环20次，这是angular中的一个过滤器。当然angular.js中还可以使用其他的过滤器，比如uppercase、lowercase和currency等。
data-ng-click——用来绑定点击事件
&input&type="button"&id="btnDelete"&value="Delete"&data-ng-click="DeleteRow($index)"&/&
$index——表示循环中的索引
data-ng-model——将angular 模型应用于html dom中，这表示当修改input输入框中的值时相应的model中的属性也会改变
&input&type="text"&data-ng-model="UserName"&required&/&
data-ng-disabled——通过该属性的值来禁用某个元素或者不禁用
&input&type="button"&id="btnSaveAll"&value="Save"&data-ng-click="SaveRecord()"&data-ng-disabled="CheckRecord()"&/&
下面让我们看一下下面的代码
var&angularuserApp&=&angular.module("userApp",&[]);
angularuserApp.controller("userAppCtrl",&function&($scope,&$http,&$interval,&$window,$timeout)&{})
第一行代码创建了一个对象，这是由html dom中data-ng-app指定的。另一行代码创建了一个控制器，是由data-ng-controller指定的。
$http用来指定服务端的地址;$interval 和 $timeout就类似于jquery中的interval和timeout，这两个变量在这个例子中只是定义但并没有被使用到，其工作原理和jquery中的相同;$window的定义和Javascript中的window对象相同，使用这个变量可以实现你想用window对象实现的效果。
下面是所有HTML代码
&div&id="divUserList"&data-ng-app="userApp"&data-ng-controller="userAppCtrl"&
&&&&&table&class="table-striped&table-hover"&style="width:100%;"&
&&&&&&&&&colgroup&
&&&&&&&&&&&&&col&style="width:15%;"/&
&&&&&&&&&&&&&col&style="width:25%;"&/&
&&&&&&&&&&&&&col&style="width:10%;"&/&
&&&&&&&&&&&&&col&style="width:10%;"&/&
&&&&&&&&&&&&&col&style="width:15%;"&/&
&&&&&&&&&&&&&col&style="width:10%;"&/&
&&&&&&&&&&&&&col&style="width:7%;"&/&
&&&&&&&&&&&&&col&style="width:7%;"&/&
&&&&&&&&&/colgroup&
&&&&&&&&&thead&
&&&&&&&&&&&&&tr&
&&&&&&&&&&&&&&&&&th&User&Name&/th&
&&&&&&&&&&&&&&&&&th&Address&/th&
&&&&&&&&&&&&&&&&&th&Email&/th&
&&&&&&&&&&&&&&&&&th&Salary&/th&
&&&&&&&&&&&&&&&&&th&Is&Married&/th&
&&&&&&&&&&&&&/tr&
&&&&&&&&&/thead&
&&&&&&&&&tbody&
&&&&&&&&&&&&&tr&data-ng-repeat="x&in&UserData&|&limitTo:20"&&&
&&&&&&&&&&&&&&&&&td&
&&&&&&&&&&&&&&&&&&&&&strong&data-ng-bind="x.UserName"&&/strong&
&&&&&&&&&&&&&&&&&/td&
&&&&&&&&&&&&&&&&&td&&span&data-ng-bind="x.Address"&&/span&&/td&
&&&&&&&&&&&&&&&&&td&&span&data-ng-bind="x.Email"&&/span&&/td&
&&&&&&&&&&&&&&&&&td&&span&data-ng-bind="x.Salary"&&/span&&/td&
&&&&&&&&&&&&&&&&&td&&span&data-ng-bind="x.IsMarried"&&/span&&/td&
&&&&&&&&&&&&&&&&&td&&input&type="button"&id="btnEdit"&value="Edit"&data-ng-click="EditRow(x)"&/&&&/td&
&&&&&&&&&&&&&&&&&td&&input&type="button"&id="btnDelete"&value="Delete"&data-ng-click="DeleteRow($index)"&/&&&/td&
&&&&&&&&&&&&&/tr&
&&&&&&&&&/tbody&
&&&&&/table&
&&&&&br&/&
&&&&&br&/&
&&&&&form&name="myform"&novalidate&
&&&&&&&&&h3&&Edit&User&Information&&/h3&
&&&&&&&&&table&class="table-striped&table-hover"&style="width:100%;"&
&&&&&&&&&&&&&tr&
&&&&&&&&&&&&&&&&&td&
&&&&&&&&&&&&&&&&&&&&User&Name&:
&&&&&&&&&&&&&&&&&/td&
&&&&&&&&&&&&&&&&&td&
&&&&&&&&&&&&&&&&&&&&&input&type="text"&data-ng-model="UserName"&required&/&
&&&&&&&&&&&&&&&&&/td&
&&&&&&&&&&&&&/tr&
&&&&&&&&&&&&&tr&
&&&&&&&&&&&&&&&&&td&
&&&&&&&&&&&&&&&&&&&&Address&:
&&&&&&&&&&&&&&&&&/td&
&&&&&&&&&&&&&&&&&td&
&&&&&&&&&&&&&&&&&&&&&input&type="text"&data-ng-model="Address"&required&/&
&&&&&&&&&&&&&&&&&/td&
&&&&&&&&&&&&&/tr&
&&&&&&&&&&&&&tr&
&&&&&&&&&&&&&&&&&td&
&&&&&&&&&&&&&&&&&&&&Email&:
&&&&&&&&&&&&&&&&&/td&
&&&&&&&&&&&&&&&&&td&
&&&&&&&&&&&&&&&&&&&&&input&type="email"&data-ng-model="Email"&/&
&&&&&&&&&&&&&&&&&/td&
&&&&&&&&&&&&&/tr&
&&&&&&&&&&&&&tr&
&&&&&&&&&&&&&&&&&td&
&&&&&&&&&&&&&&&&&&&&Salary&:
&&&&&&&&&&&&&&&&&/td&
&&&&&&&&&&&&&&&&&td&
&&&&&&&&&&&&&&&&&&&&&input&type="number"&data-ng-model="Salary"&/&
&&&&&&&&&&&&&&&&&/td&
&&&&&&&&&&&&&/tr&
&&&&&&&&&&&&&tr&
&&&&&&&&&&&&&&&&&td&
&&&&&&&&&&&&&&&&&&&&Is&Married&:
&&&&&&&&&&&&&&&&&/td&
&&&&&&&&&&&&&&&&&td&
&&&&&&&&&&&&&&&&&&&&&input&type="checkbox"&data-ng-model="IsMarried"&/&
&&&&&&&&&&&&&&&&&/td&
&&&&&&&&&&&&&/tr&
&&&&&&&&&&&&&tr&
&&&&&&&&&&&&&&&&&td&colspan="2"&
&&&&&&&&&&&&&&&&&&&&&input&type="button"&id="btnSaveAll"&value="Save"&data-ng-click="SaveRecord()"&data-ng-disabled="CheckRecord()"&/&
&&&&&&&&&&&&&&&&&&&&&input&type="button"&id="btnClear"&value="Clear"&data-ng-click="ClearRecord()"&data-ng-disabled="CheckRecord()"&/&
&&&&&&&&&&&&&&&&&/td&
&&&&&&&&&&&&&/tr&
&&&&&&&&&/table&
&&&&&/form&
&&&&var&angularuserApp&=&angular.module("userApp",&[]);
&&&&angularuserApp.controller("userAppCtrl",&function&($scope,&$http,&$interval,&$window,&$timeout)&{
&&&&&&&&//==Intit&Value================
&&&&&&&&$scope.UserName&=&"";
&&&&&&&&$scope.Address&=&"";
&&&&&&&&$scope.Email&=&"";
&&&&&&&&$scope.Salary&=&
&&&&&&&&$scope.IsMarried&=&
&&&&&&&&//==Intit&Value================
&&&&&&&&$scope.LoadIntialData&=&function&()&{
&&&&&&&&&&&&var&routeurl&=&'@Url.Action("GetData",&"User")';
&&&&&&&&&&&&$http.get(routeurl).success(function&(data)&{
&&&&&&&&&&&&&&&&$scope.UserData&=&
&&&&&&&&&&&&}).error(function&(e)&{
&&&&&&&&&&&&&&&&//&error&handling
&&&&&&&&&&&&});
&&&&&&&&$scope.LoadIntialData();
&&&&&&&&$scope.DeleteRow&=&function&(index)&{
&&&&&&&&&&&&$scope.UserData.splice(index,&1);
&&&&&&&&&&&&//==================if&you&use&real&time&application&then&need&to&call&to&conroller&from&remove&record&from&db=======
&&&&&&&&$scope.EditRow&=&function&(ele)&{
&&&&&&&&&&&&$scope.UserName&=&ele.UserN
&&&&&&&&&&&&$scope.Address&=&ele.A
&&&&&&&&&&&&$scope.Email&=&ele.E
&&&&&&&&&&&&$scope.Salary&=&ele.S
&&&&&&&&&&&&$scope.IsMarried&=&ele.IsM
&&&&&&&&$scope.SaveRecord&=&function&()&{
&&&&&&&&&&&&var&invalidfiled&=&"";
&&&&&&&&&&&&if&(!$scope.myform.$valid)&{
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&}
&&&&&&&&&&&&else&{
&&&&&&&&&&&&&&&&var&IsItemUpdate&=&
&&&&&&&&&&&&&&&&$.each($scope.UserData,&function&(i,&n)&{
&&&&&&&&&&&&&&&&&&&&if&(n.UserName&==&$scope.UserName&&&&n.Address&==&$scope.Address)&{
&&&&&&&&&&&&&&&&&&&&&&&&IsItemUpdate&=&
&&&&&&&&&&&&&&&&&&&&&&&&n.Email&=&$scope.E
&&&&&&&&&&&&&&&&&&&&&&&&n.Salary&=&$scope.S
&&&&&&&&&&&&&&&&&&&&&&&&n.IsMarried&=&$scope.IsM
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&});
&&&&&&&&&&&&&&&&if&(IsItemUpdate&==&false)&{
&&&&&&&&&&&&&&&&&&&&var&obj&=&new&Object();
&&&&&&&&&&&&&&&&&&&&obj.UserName&=&$scope.UserN
&&&&&&&&&&&&&&&&&&&&obj.Address&=&$scope.A
&&&&&&&&&&&&&&&&&&&&obj.Email&=&$scope.E
&&&&&&&&&&&&&&&&&&&&obj.Salary&=&$scope.S
&&&&&&&&&&&&&&&&&&&&obj.IsMarried&=&$scope.IsM
&&&&&&&&&&&&&&&&&&&&$scope.UserData.unshift(obj);
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&$scope.ClearRecord();
&&&&&&&&&&&&&&&&//==================if&you&use&real&time&application&then&need&to&call&to&conroller&from&save&record&from&db=======
&&&&&&&&&&&&}
&&&&&&&&$scope.CheckRecord&=&function&()&{
&&&&&&&&&&&&if&($scope.UserName&!=&""&&&&$scope.Address&!=&"")
&&&&&&&&&&&&&&&&return&
&&&&&&&&&&&&else
&&&&&&&&&&&&&&&&return&
&&&&&&&&$scope.ClearRecord&=&function&()&{
&&&&&&&&&&&&$scope.UserName&=&"";
&&&&&&&&&&&&$scope.Address&=&"";
&&&&&&&&&&&&$scope.Email&=&"";
&&&&&&&&&&&&$scope.Salary&=&
&&&&&&&&&&&&$scope.IsMarried&=&
下面是控制器的实现代码
public&class&UserController&:&Controller
&&&&&&&//&GET:&/User/
&&&&&&&public&ActionResult&Users()
&&&&&&&&&&&return&View();
&&&&&&&public&JsonResult&GetData()
&&&&&&&&&&&List&User&&objList&=&new&List&User&();
&&&&&&&&&&&//==Create&the&test&data&for&in&view&&============================
&&&&&&&&&&&User&objuser&=&new&User();
&&&&&&&&&&&objuser.UserName&=&"Pragnesh&Khalas";
&&&&&&&&&&&objuser.Address&=&"B-25&Swaminarayan&Park&Naroda&Ahmedabad";
&&&&&&&&&&&objuser.Email&=&"";
&&&&&&&&&&&objuser.Salary&=&9000;
&&&&&&&&&&&objuser.IsMarried&=&
&&&&&&&&&&&objList.Add(objuser);
&&&&&&&&&&&objuser&=&new&User();
&&&&&&&&&&&objuser.UserName&=&"Rahul&Patel";
&&&&&&&&&&&objuser.Address&=&"A-40&Navkar&Soci.&Ahmedabad";
&&&&&&&&&&&objuser.Email&=&"";
&&&&&&&&&&&objuser.Salary&=&8000;
&&&&&&&&&&&objuser.IsMarried&=&
&&&&&&&&&&&objList.Add(objuser);
&&&&&&&&&&&objuser&=&new&User();
&&&&&&&&&&&objuser.UserName&=&"Bhavin&Patel";
&&&&&&&&&&&objuser.Address&=&"D-10&Bharat&Soci.&Ahmedabad";
&&&&&&&&&&&objuser.Email&=&"";
&&&&&&&&&&&objuser.Salary&=&6000;
&&&&&&&&&&&objuser.IsMarried&=&
&&&&&&&&&&&objList.Add(objuser);
&&&&&&&&&&&return&Json(objList,&JsonRequestBehavior.AllowGet);
下面是模型代码
public&class&User
&&&&[Required]
&&&&public&string&UserName&{&&&}
&&&&[Required]
&&&&public&string&Address&{&&&}
&&&&[EmailAddress]
&&&&public&string&Email&{&&&}
&&&&public&double?&Salary&{&&&}
&&&&public&bool?&IsMarried&{&&&}
以上就是本文的整体内容，希望对你有所帮助。
& 收藏(0) 收藏 +1 已收藏 取消
& 推荐上头条 推荐 +1 推荐上头条 已推荐
文章上传作者
madlion的热门文章
开发者交流群：
DevStore技术交流群2：
运营交流群：
产品交流群：
深圳尺子科技有限公司
深圳市南山区蛇口网谷万海大厦C栋504
Copyright (C) 2015 DevStore. All Rights Reserved
DevStore用户登录
还没有DevStore帐号？
快捷登录：新手，觉得Angularjs好难，该如何学习Angularjs？
唔，我是前端小白，只对html和css比较熟悉，js方面学过一点jquery，基础不是很好，最近要求学习Angularjs，学了快一个星期，感觉真的好难啊，网上看了教学视频，菜鸟教程也看了好多遍，但是自己运用直接就懵逼了，连基本的增删改查都实现不了，之前接触过Ci框架，可以说对MCV模式有一定的了解吧，想知道Angularjs的学习路线，对js基础要求高嘛，能否直接开始学习？---不知不觉这个这个问题已经过去将近一个月了，首先感谢大家的回答以及建议和经验，提这个问题的时候我才接触angularjs三天，我确实太急于求成了，这快一个月的学习让我对angularjs有了初步的了解，可以说是半只脚踩到了门槛上吧，确实，学习还是要静下心来，一步步踏实的走，幸运点的像我，在公司有前辈能指导，动手去做是关键，别学边做边理解确实是最快的途径，最后，再次感谢大家的回答。
按时间排序
我觉得在学习框架前，首先应该具备良好的JavaScript基础，学习热门框架可以让你在短期内挣到钱，但你能挣多少钱取决自你的基础知识，相比其它领域，Web前端框架更新速度可谓日新月异，所以不要为了新技术而疲于奔命。
我也觉得好难啊
可以试试qc
和jquery相比，angular已经简单多了，特别适合那种不打算在前端有深入发展但是眼前就需要快速产出的人，主要是数据绑定比jquery选择器更容易上手，前提是对于注入和mvc思想有所了解，我这种前端半吊子表示用着很爽
angular适合做多组件联动的页面 像电子地图之类的应用。如果你写惯了jQuery手工操作DOM的代码， 刚开始的时候会对angular的代码风格非常不适应。
angular刚开始我也挺讨厌的，后来越看越喜欢，入门嘛，每个人不同，取决于你JS的水平，如果水平高的话，入门挺简单，水平不够的话，勉强看也看不懂
去慕课网，看大漠穷秋的视频。受益良多。
建议你动手写，先别写太复杂的，一个功能一个功能的实验，codeacademy里有演示和作业。另外，还有angular的程序分门别类放好，我觉得很重要
最近公司一个项目也在用，由于烦透了用jquery做各种数据和ui绑定，所以找到angular，大致了解了3天，看文档，demo，api然后试着写点小测试页面，然后开始在公司项目中用，自己封装了几个常用的directive，filter，感觉很不错，大大减少代码量。小弟在做项目中，通过看代码，讲解，理解起来还是比较快的，为什么呢？因为他们被之前的开发方式折磨得……其实，还是要有实际痛苦的体验，如果你在项目中，每天用jquery做ui和数据绑定，各种事件监听，各种dom操作，你就会思考如何自己设计一套机制(或者库)来做这些枯燥无聊，又必须得做的工作。然后你再用angular，结合之前自己封装的一些代码或者方式，稍微对比讲解一下，估计你也能一下子理解了(小弟们正好有过这种体验)，这个前提就是，你要有足够多的类似体验。如果本身这种体验不多，突然看到或者想理解angular，确实会很难！最后你会说:太复杂了，还不如我用jquery呢！
我是新手同样在学
先通过一些小的案例学习如何使用，有余力再看看底层的实现以及改写，参与它的迭代
我刚开始学的时候也觉得坑挺深。现在基本不再用Angular 了，感觉里面有不少over engineered的东西。你要是喜欢angular 这一套方式，不如试试vue，很轻量，易上手
本人基本没有什么js的基础。。。花了一周时间上手参与一个angularjs开发的web app。我的建议是多看文档，尝试自己从头开始搭一个小app，一点点学着使用。比如先写一个controller，试着用data-binding 做一点小的交互，你也用到了ng-click和ng-repeat, 然后试着写一个filter，用在之前的数据展示上，加上样式以后写一点ng-class和ng-style之类的东西，接下来用router写一下路由，多做几个页面，用ng-view写一点子页面，试一下ui-router插件，给不同的页面加不同的controller，然后写resource，尝试从后台拿了数据以后展示出来，再用watch什么的加强一下你的交互blabla...如果js不熟，对angularjs的代码风格可能短时间难以习惯，那就多写写吧。写了以后你或许就慢慢有自信了，在此基础上有空的时候完整刷一遍文档，恩，加油！
angular对于js基础不够好的新手确实比较困难，尽量多想一想directive，provider，filter是什么，想通了就知道angular是什么，该怎么写了，在这之前建议花几天时间把js基础先看一遍
每当我身边的人如此抱怨时，我都会告诉他：“我们之所以学一门技术，不是因为他简单，而是因为他强大。”
这个网站不错！！
我的建议是先不要去看原理，你基础不扎实，可以从如何使用入手学，一定要看视频…完了js的基础还是要去打牢固了，推荐 javascript权威指南。
同样一直在做CI和AngularJS相关，AngularJS是以数据驱动表现，和MVC还是有些不一样，我觉得看文档挺重要的，不懂马上查文档推荐个Youtube的视频：AngularJS - BindingAngularJS - ControllersAngularJS - The DotAngularJS - Sharing Data Between ControllersAngularJS - Defining a Method on the ScopeAngularJS - FiltersAngularJS - Testing OverviewAngularJS - ngFilterAngularJS - Built-in FiltersAngularJS - First DirectiveAngularJS - Directive RestrictionsAngularJS - Basic BehaviorsAngularJS - Useful BehaviorsAngularJS - Directives Talking to ControllersAngularJS - Directive to Directive CommunicationAngularJS - Understanding Isolate ScopeAngularJS - Isolate Scope "@"AngularJS - Isolate Scope "="AngularJS - Isolate Scope "&"AngularJS - Isolate Scope ReviewAngularJS - Transclusion BasicsAngularJS - An Alternative Approach to ControllersAngularJS - Thinking Differently About OrganizationAngularJS - Building ZippyAngularJS - angular.elementAngularJS - $scope vs. scopeAngularJS - templateUrlAngularJS - $templateCacheAngularJS - ng-viewAngularJS - The config functionAngularJS - $routeProvider apiAngularJS - $routeParamsAngularJS - redirectToAngularJS - PromisesAngularJS - ResolveAngularJS - resolve conventionsAngularJS - resolve $routeChangeErrorAngularJS - Directive for Route HandlingAngularJS - Route Life CycleAngularJS - ProvidersAngularJS - InjectorsAngularJS - Components and ContainersAngularJS - $index, $event, $logAngularJS - Experimental "Controller as" SyntaxAngularJS - Directive CommunicationAngularJS - ngminAngularJS - ng-repeat-startAngularJS - animation basicsAngularJS - Animating with JavaScriptAngularJS - Animating the Angular WayAngularJS - angular.copyBower - Intro to BowerAngularJS - angular.bootstrapAngularJS - No custom markupAngularJS - Unit Testing Hello WorldAngularJS - Unit Testing a DirectiveAngularJS - Testing ScopeAngularJS - Testing UnderscoresAngularJS - Intro to Karma
angular相对一些常见的框架来说学习曲线要陡峭一点，也需要一些基础的js知识。不要盲目的追求前端框架和库，因为你js基础还不扎实的时候，会觉得他们坑多难懂不好用。。
已有帐号？
无法登录？
社交帐号登录Augular JS里的各种ng - JavaScript当前位置:& &&&Augular JS里的各种ngAugular JS里的各种ng&&网友分享于：&&浏览：224次Augular JS里的各种ng-
正文：１．ng-disabled="一种状态：该状态下不可用"例如：%button.btn.btn-2(ng-disabled="!activity_name")创建　//"activity_name"是一个可判断的值，当其值为true时，按钮可正常显示;flase时，按钮为灰色不可点２．ng-tap="一个函数：点击时触发"%button.btn.btn-2( ng-tap="create_activity()")创建　//当点击创建时会调用create_activity()函数，需要在Controller.js中定义其function３．ng-change="一个函数：有改变时触发"　　%input(type="text" ng-change="activity_name" )//相当于watch的作用4.ng-blind="字符串"%p(ng-blind="greeting")
//greeting是一个字符串,可在Controller.js中定义５．ng-model＝＂取一个名字＂%input(type="text" ng-model="activity_name" )　//给input来一个绑定６．ng-repeat＝＂元素　in 数组＂%li(ng-repeat="name in names")
　　{{name}}　　//names是一个数组，ng-repeat对于数组中的每一项都创建一次一组元素的一份副本７．ng-show＝＂一个判断条件：当其值为true时，按钮显示＂%button("ng-show="judge")返回 //其中judge是一个判断，可以使用函数返回值，或者直接传递一个值参考：Augular JS官方介绍：http://docs.angularjs.org/api/ng
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有AngularJS: ngInclude and dynamic URLs [用AngularJS：nginclude和动态URL] - 问题-字节技术
AngularJS: ngInclude and dynamic URLs
用AngularJS：nginclude和动态URL
问题 (Question)
I'm using the ngInclude directive to load HTML fragments. Now I'm looking for the best way to pass a dynamic URL. I know I can create the URL with string concatenation:
&ng-include src="'/foo/' + fooId + '/bar/' + barId + '/baz/' + bazId"&&/ng-include&
In my eyes this is a bit ugly.
ngHref and ngSrc for example, accept URLs containing {{}} markup. IMHO this syntax is much cleaner:
&img ng-src="/foo/{{fooId}}/bar/{{barId}}/baz/{{bazId}}"/&
&a ng-href="/foo/{{fooId}}/bar/{{barId}}/baz/{{bazId}}"/&
Is there a better way to pass dynamic URLs to ngInclude?
我用的ngInclude指令加载HTML片段。现在我正在寻找通过一个动态的URL的最好的方法。我知道我可以创建连接字符串的URL：&ng-include src="'/foo/' + fooId + '/bar/' + barId + '/baz/' + bazId"&&/ng-include&在我的眼里这是一个有点丑。ngHref和ngSrc例如，接受URL包含{{}}标记。恕我直言，这个语法是非常干净：&img ng-src="/foo/{{fooId}}/bar/{{barId}}/baz/{{bazId}}"/&&a ng-href="/foo/{{fooId}}/bar/{{barId}}/baz/{{bazId}}"/&有没有更好的方法通过动态URL nginclude？
最佳答案 (Best Answer)
Not sure if this is "better" or not, but you could create a function on your scope to encapsulate this.
app.controller("MyCtrl", function($scope) {
$scope.fooId = "123";
$scope.barId = "abc";
$scope.bazId = "abc";
$scope.templateUrl = function() {
return "/foo/"+ $scope.fooId +"/bar/"+ $scope.barId +"/baz/"+ $scope.bazId;
Then you would use it like so...
&div ng-controller="MyCtrl"&
&ng-include src="templateUrl()"&&/ng-include&
Here's a live example of this type of thing:
不知道这是“好”或没有，但你可以创建一个功能在你的范围将这。app.controller("MyCtrl", function($scope) {
$scope.fooId = "123";
$scope.barId = "abc";
$scope.bazId = "abc";
$scope.templateUrl = function() {
return "/foo/"+ $scope.fooId +"/bar/"+ $scope.barId +"/baz/"+ $scope.bazId;
然后您可以使用它像这样…&div ng-controller="MyCtrl"&
&ng-include src="templateUrl()"&&/ng-include&
这是一个活生生的例子，这种类型的事情：
本文翻译自StackoverFlow，英语好的童鞋可直接参考原文：