angularjs的ng-repeat回调

  首先html代码是这样的:

<label>Name des Leiters:</label><select name="leaderID" id="selectLeaderID">
  <option ng-repeat="manager in managers" value="leader_id={{manager.id}}&leader_name={{manager.name}}&leader_email={{manager.email}}" callback-on-end>{{manager.name}}</option>
</select>

  因为只有一个ID确定,需要设置option的selected值,但是又不能直接用ng-model或者$().val()来设置,因为value是一长串东西= =0。0我为什么要写这样的代码

所以,只能通过ng-repeat的加载完成后调用回调函数,来完成设置。

  代码如下:

  app.directive("callbackOnEnd", function($timeout) {
      return {
          restrict: "A",
          link: function(scope, element, attrs) {
              if (scope.$last) {
                $timeout(function(){
                  var select = document.getElementById("selectLeaderID");
                  for(var i = 0;i < select.options.length;i++){
                        var parts = [];
                        parts = select.options[i].value.split(‘&‘);
                        if(parts[0].substr(10) == scope.selectLeaderID){
                            select.options[i].selected = true;
                        }
                    }
                });
              }
          }
      };
  });

  添加一个directive,注意要用到$timeout否则每次设置option时都会加载一次,而不是最后加载。

  最后祝各位小朋友们好好学习,天天向上,哈哈哈哈下周复活节放假可以来个西班牙葡萄牙游!

时间: 2024-10-11 06:34:13

angularjs的ng-repeat回调的相关文章

转走进AngularJs(八) ng的路由机制

走进AngularJs(八) ng的路由机制 2013-12-19 我来说两句 收藏 我要投稿 今天心情不错~,公司请了个中医来给按摩拔罐刮痧,一套下来那个爽啊~,趁着精力充沛了解了下Angular的路由机制,在此分享出来与大家共同学习. 在谈路由机制前有必要先提一下现在比较流行的单页面应用,就是所谓的single page APP.为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而ajax的一个致命缺点就是导致浏览器后退按钮失效,尽管我们可以

Part 6 AngularJS ng repeat directive

ng-repeat is similar to foreach loop in C#. Let us understand this with an example. Here is what we want to do. 1. For each employee we have in the employees array we want a table row. With in each cell of the table row we to display employee Firstna

走进AngularJs(二) ng模板中常用指令的使用方式

通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板开始入手是个不错方式,因为这部分内容相对简单好理解,而且是视图层的东西,大家都喜欢可以立马看得见的东西嘛.本篇我将搜罗模板中的常用指令一一测试,了解其使用方法,有点像背单词的感觉,会比较枯燥.不过对于初学,这样的枯燥是必须要经历的,开始~ 一.模板中可使用的东西及表达式 模板中可以使用的东西包括以下

走进AngularJs(八) ng的路由机制

在谈路由机制前有必要先提一下现在比较流行的单页面应用,就是所谓的single page APP.为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而ajax的一个致命缺点就是导致浏览器后退按钮失效,尽管我们可以在页面上放一个大大的返回按钮,让用户点击返回来导航,但总是无法避免用户习惯性的点后退.解决此问题的一个方法是使用hash,监听hashchange事件来进行视图切换,另一个方法是用HTML5的history API,通过pushState(

AngularJS自定义标签添加回调函数eval()

function helloworld(name){ console.log("hello!!!!!"+name) } var name="zhangsan"; eval("helloworld(name)"); 代码粘贴到谷歌的控制台可以看到 hello!!!!! zhangsan 可以使用这个功能----返回用户选择的某行数据. <smcs-search-input-table table-uniqueflag="b"

angularJs中ng一些内置的工具方法:

1.angular.equals: (1)两个参数满足===比较返回true;(2)两个参数是同一种类型,同时他们的每一个属性通过angular.equals都是返回true:(3)两个都是NAN(在js中虽然NAN==NAN为false,但是这里为true);(4)两个对象代表同一个正则表达式,如/abc/==/abc/(虽然在js中返回false) 2.angular.copy: 创建来源source的一个深度克隆对象,可以是一个对象或者数组.如果没有指定destination那么就会返回一

学会使用AngularJS

这是用前端框架AngularJS构建一个简单应用的部分代码,首页配制一个路由.当然,AngularJS路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样.前端路由需要提前对指定 的(ng-app),定义路由规则(routeProvider),然后通过不同的URL,告诉(ng-app)加载哪个页面(HTML),再渲染到(ng-app)视图(ng-view)中.虽然URL输入不一样,页面展示不一样,其实完成的是单页(ng-app)视图(ng-view)的局部刷新. 由上图可以知道: 控制器

基于angularJS和requireJS的前端架构

1.概要描述 1.1.angularJS描述:angularJS是可以用来构建WEB应用的,WEB应用中的一种端对端的完整解决方案.通过开发者呈现一个更高层次的抽象来简化应用的开发.最适合的就是用它来构建一个CRUD应用,它提供了非常方便的且统一高效的解决方案,其数据绑定.基本模版标识符.表单验证.路由.深度链接.组件重用.依赖注入.以及HTML标记等,最受欢迎的莫过于它的双向数据绑定. 1.2.requireJS描述:requireJS是来解决传统的页面加载script标记操作,通过其初始化配

table sorting&ndash;angularjs

1: <script type="text/javascript" ng:autobind 2: src="http://code.angularjs.org/0.10.5/angular-0.10.5.js"></script> 3:   4: <table ng:controller="SortableTableCtrl"> 5: <thead> 6: <tr> 7: <th

[译]用AngularJS构建大型ASP.NET单页应用(三)

原文地址:http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single AngularUI 下面的示例中使用了AngularUI的各种UI组件.AngularUI 是AngularJS 框架的一个辅助套件.示例中使用的主要组件大部分来在AngularUI 的一个子集UI Bootstrap.UI Bootstrap是从Twitter Bootstrap派生出来的,它使用A