AngularJs中，如何在ng-repeat完成之后，执行Js脚本 - 韭菜茄子 - 博客园
//ng-repeat生成4个li,生成后再执行自定义方法fn在每个li后加一根横线
var myapp=angular.module('myapp',[]);
myapp.directive('onFinishRenderFilters', function ($timeout) {
restrict: 'A',
link: function(scope, element, attr) {
if (scope.$last === true) {
$timeout(function() {
scope.$emit('ngRepeatFinished');//注册一个事件
}).controller('test',function($scope){
$scope.fn=function(){
$('.item').append('&hr/&')
$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {//监听事件
//下面是在li render完成后执行的js
$scope.fn()
&body ng-app="myapp" ng-controller="test"&
&ul class="list" ng-init="aa=[1,2,3,4]"&
&li class="item" ng-repeat="x in aa" on-finish-render-filters& //在需要监控的地方，加上该directive
hello world!AngularJS 教程
AngularJS ng-submit 指令
AngularJS 实例
表单提交后执行函数:
&body ng-app="myApp" ng-controller="myCtrl"&&form ng-submit="myFunc()"&&&&
&input type="text"&&&& &input type="submit"&&/form&
&p&{{myTxt}}&/p&&script&var app = angular.module("myApp",
[]);app.controller("myCtrl", function($scope) {&&& $scope.myTxt
= "你还没有点击提交!";&&& $scope.myFunc =
function () {&&&&&&& $scope.myTxt =
"你点击了提交!";&&& }});&/script&
定义和用法
ng-submit 指令用于在表单提交后执行指定函数。
&form ng-submit="expression"&&/form&
&form& 元素支持该属性。
expression
表单提交后函数将被调用，或者一个表达式将被执行，表达式返回函数调用。
记住登录状态
重复输入密码& AngularJS路由和模板
AngularJS路由和模板
，将介绍如何用angularjs构建一个强大的web前端系统。angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下，angularjs能脱颖而出，从架构设计上就高人一等，双向数据绑定，依赖注入，指令，MVC，模板。Angular.js创新地把后台技术融入前端开发，扫去jQuery一度的光芒。用angularjs就像写后台代码，更规范，更结构化，更可控。
张丹(Conan), 程序员Java,R,PHP,Javascript
weibo：@Conan_Z
转载请注明出处：
如果想开发一款类似gmail的web应用，我们怎么做呢？
以jQuery的思路，做响应式的架构设计时，我们要监听所有点击事件，通过事件函数触发我们加载数据，提交，弹框，验证等的功能；以 AngularJS的思路，做声明式的架构设计时，我们通过指令和路由先设定好，什么样的操作干什么事情，等事件发生时，程序就会知道该干什么了。
今天说一下，AngularJS是如何实现前端路由功能的！
AngularJS路由介绍
路由的代码实现
实现效果截图
1. AngularJS路由介绍
AngularJS路由功能是一个纯前端的解决方案，与我们熟悉的后台路由不太一样。后台路由，通过不同的URL会路由到不同的控制器上(controller)，再渲染(render)到页面(HTML)。AngularJS的前端路由，需求提前对指定的(ng-app)，定义路由规则(routeProvider)，然后通过不同的URL，告诉(ng-app)加载哪个页面(HTML)，再渲染到(ng-app)视图(ng-view)中。
AngularJS的前端路由，虽然URL输入不一样，页面展示不一样，其实完成的单页(ng-app)视图(ng-view)的局部刷新。这样来看，AngularJS做单页应用就有点标配的感觉了。
从这个角度想想，要实现一个gmail的应用，真的就不难了。
2. 路由的代码实现
理论不多说了，直接上代码！！ 还是基于我们之前用。
业务场景：论坛功能，帖子列表页(list.html) 和 帖子内容页(detail.html)。
代码文件：
1. 增加：app/demo-route.html
2. 增加：app/views/route/list.html
3. 增加：app/views/route/detail.html
4. 修改: app/scripts/app.js
5. 修改: app/scripts/controllers/main.js
1). 增加：app/demo-route.html
这个文件是主页面(ng-app)，包含视图(ng-view)
&!doctype html&
&meta charset="utf-8"&
&title&route&/title&
&body ng-app="routeApp"&
&h1&Route Demo index&/h1&
&div ng-view&&/div&
&script src="bower_components/angular/angular.js"&&/script&
&script src="scripts/app.js"&&/script&
&script src="scripts/controllers/main.js"&&/script&
2). 增加：app/views/route/list.html
这个页面是布局模板，是HTML的代码片段。包括了一组ID的列表，通过ID列表的链接，可以进入到ID的详细页面。
&h3&Route : List.html&/h3&
&li ng-repeat="id in [1, 2, 3 ]"&
&a href="#/list/{{ id }}"& ID{{ id }}&/a&
3). 增加：app/views/route/detail.html
这个页面是布局模板，是HTML的代码片段。通过ID访问，包含ID号, (ID的文章内容)
&h3&Route &span style="color:"&{{id}}&/span&: detail.html &/h3&
4). 修改: app/scripts/app.js
这个是ng-app文件的定义，我们在demo-route.html中定义了routeApp，在这里需要声明。
var routeApp = angular.module('routeApp',[]);
routeApp.config(['$routeProvider',function ($routeProvider) {
$routeProvider
.when('/list', {
templateUrl: 'views/route/list.html',
controller: 'RouteListCtl'
.when('/list/:id', {
templateUrl: 'views/route/detail.html',
controller: 'RouteDetailCtl'
.otherwise({
redirectTo: '/list'
在routeApp模块中，我们定义了路由和布局模板。routeApp的默认URL是/list，即http://localhost:9000/demo-route.html#/list。 跳转详细页的路由是/list/:id，id为参数。
同时，/list的布局模板是views/route/list.html，属于RouteListCtl的控制器管理空间。
5). 修改: app/scripts/controllers/main.js
这个文件定义控制器controller。
routeApp.controller('RouteListCtl',function($scope) {
routeApp.controller('RouteDetailCtl',function($scope, $routeParams) {
$scope.id = $routeParams.
分别对应该路由中的两个控制器声明。
程序写好，我们打开浏览器看效果。
3. 实现效果截图
别忘了用下面命令，启动程序。
grunt server
浏览器被自动打开，默认出的是http://localhost:9000/demo-route.html#/list, “#/list”是被redirectTo转向的结果。
点击ID2的链接。
页面被刷新了，出了detil的页面。同时，我们注意观察，页面没有整个刷新，而在视图中(ng-view)做的局部刷新。因为，chrome的开发工具的监控中，只是看到detail.html被加载。
我们再浏览地址栏中，输入212
http://localhost:9000/demo-route.html#/list/212
观察chrome的开发工具的监控中，没有任何的networking操作。
在浏览地址栏中，再输入原来list的地址
http://localhost:9000/demo-route.html#/list
观察chrome的开发工具的监控，确认没有任何变化！！
从这个实验，我们看到AngularJS纯前端路由的实现思路，配合视图的局部刷新，把业务功能切片后分散到HTML的模板页面中。非常容易地实现了widget。并且，这种widget可重用性会非常高，能大大减少前端代码量。
后端组件化开发思路，流畅的嵌入前端。爽死啦！！！
转载请注明出处：
This entry was posted in ,
Designed by浅谈AngularJS中ng-class的使用方法
投稿：jingxian
字体：[ ] 类型：转载 时间：
下面小编就为大家带来一篇浅谈AngularJS中ng-class的使用方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
有三种方法：
1、通过$scope绑定（不推荐）
2、通过对象数组绑定
3、通过key/value键值对绑定
实现方法：
1、通过$scope绑定（不推荐）：
function ctrl($scope) {
$scope.className = "selected";
&div class="{{className}}"&&/div&
2、通过对象数组绑定：
function ctrl($scope) {
$scope.isSelected =
&div ng-class="{true:'selected',false:'unselected'}[isSelected]"&&/div&
当isSelected为true时，增加selected样式；当isSelected为false时，增加unselected样式。
3、通过key/value键值对绑定：
function ctrl($scope) {
$scope.isA =
$scope.isB =
$scope.isC =
&div ng-class="{'A':isA,'B':isB,'C':isC}"&&/div&
当isA为true时，增加A样式；当isB为true时，增加B样式；当isC为true时，增加C样式。
&ion-list&
&ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}"&
{{project.title}}
&/ion-item&
&/ion-list&
根据projects循环创建ion-item，当activeProject为当前循环到的project时，增加active样式。
几点说明：
1、不推荐第一种方法，因为controller $scope应该只有数据和行为
2、ng-class是增加相关样式，可以和class同时使用
以上就是小编为大家带来的浅谈AngularJS中ng-class的使用方法全部内容了，希望大家多多支持脚本之家~
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具问题：(angularjs)angular js 通过ng-repeat 如何迭代 map集合 ？ 如何获取key和value ？
描述:如题 ：
如何跌倒map集合 ？ 解决方案1:$scope.map = {key:"value"};
&h1&ng-repeat="(key,value) in map"&{{value}}&/h1&
以上介绍了“(angularjs)angular js 通过ng-repeat 如何迭代 map集合 ？ 如何获取key和value ？”的问题解答，希望对有需要的网友有所帮助。
本文网址链接：/itwd/1562863.html
上一篇： 下一篇：}