由于angular ng-repeat只能写在标签上 循环对象的对象时遇到的问题及解决方法_小组_ThinkSAAS
由于angular ng-repeat只能写在标签上 循环对象的对象时遇到的问题及解决方法
由于angular ng-repeat只能写在标签上 循环对象的对象时遇到的问题及解决方法
对象数据结构
12345678910111213141516171819$scope.obj = {
"section1":{
"category1":{
"key1":"value1",
"key2":"value2"
"category2":{
"key1":"value3",
"key2":"value4"
"section2":{
"category3":{
"key1":"value5",
"key2":"value6"
ng-repeat循环时的结构
12345678<ul ng-repeat="(key,value) in obj">
<li ng-repeat="(subkey,subValue)" in value>
{{subkey}}
{{subValue.key1}}
{{subValue.key2}}
这样循环输出的结果
12345678910111213141516171819202122
而我希望的结果是li在一个ul中循环，这样可以避免当li的个数为奇数时，产生的布局问题。
最后解决的方法是改造对象,将它生成为一个新的数组进行循环。
12345678910111213141516171819202122232425$scope.buildData = function(){
var newArr = [];
angular.forEach($scope.obj,function(value,key){
angular.forEach(value,function(subvalue,subkey){
newArr.push({
"section": key,
"category": subkey,
"key1":subvalue["key1"],
"key2":subvalue["key2"]
return newA};$scope.newObj =
$scope.buildData();
<li ng-repeat="data in newObj ">
{{data.section}}
{{data.category}}
{{data.key1}}
{{data.key2}}
PHP开发框架
开发工具/编程工具
服务器环境
ThinkSAAS商业授权：
ThinkSAAS为用户提供有偿个性定制开发服务
ThinkSAAS将为商业授权用户提供二次开发指导和技术支持
官方1群：【已满】
让ThinkSAAS更好，把建议拿来。angularjs ng-repeat里面的ng-model如何设置得不同?
类似这样的情况，如何设置ng-model让循环里面的每一个都不一样，当然我这样写会报错。
使用情景是我checkbox有一个方法点击的时候改变class来改变checkbox的勾选样式,
所以需要每一个ng-model不一样，不然我点一个，全部都会被勾选
&tr class="gradeX odd" ng-repeat="data in datas"&
&input type="checkbox" ng-model="check.{{data.id}}"&
按投票排序
用 data.checked
把{{ }}去掉看看
已有帐号？
无法登录？
社交帐号登录AngularJS实现表格数据的编辑,更新和删除
效果首先，我们先建立一些数据，当然你可以从你任何地方读出你的数据var&app&=&angular.module(&#39;plunker&#39;,&[&#39;ui.bootstrap&#39;]);
app.controller(&#39;MainCtrl&#39;,&function($scope)&{
&&$scope.name&=&&#39;World&#39;;
&&$scope.employees&=[{id:101,&name:&#39;John&#39;,&phone:&#39;555-1276&#39;},
&&&&&&&&&&&&&&&&&&&&&&&&&&&{id:102,&name:&#39;Mary&#39;,&phone:&#39;800-1233&#39;},
&&&&&&&&&&&&&&&&&&&&&&&&&&&{id:103,name:&#39;Mike&#39;,&phone:&#39;555-4321&#39;},
&&&&&&&&&&&&&&&&&&&&&&&&&&&{id:104,name:&#39;Adam&#39;,&phone:&#39;555-5678&#39;},
&&&&&&&&&&&&&&&&&&&&&&&&&&&{id:105,name:&#39;Julie&#39;,&phone:&#39;555-8765&#39;},
&&&&&&&&&&&&&&&&&&&&&&&&&&&{id:106,name:&#39;Juliette&#39;,&phone:&#39;555-5678&#39;}];
$scope.showEdit&=&
&$scope.master&=&{};
});这里，我们可以直接var app = angular.module(&#39;plunker&#39;,[]);因为我们没有用到angular的bootstrap.&!DOCTYPE&html&
&html&ng-app=&plunker&&
&&&&&meta&charset=&utf-8&&/&
&&&&&title&AngularJS&Plunker&/title&
&&&&&script&document.write(&#39;&base&href=&&#39;&+&document.location&+&&#39;&&/&&#39;);&/script&
&&&&&script&data-require=&angular.js@1.2.x&&src=&http://code.angularjs.org/1.2.13/angular.js&&data-semver=&1.2.13&&&/script&
&&&&&script&src=&jquery-1.11.0.min.js&&&/script&
&&&&&script&src=&ui-bootstrap-tpls-0.10.0.min.js&&&/script&
&&&&&script&src=&bootstrap.js&&&/script&
&&&&&script&src=&app.js&&&/script&
&&&&&link&rel=&stylesheet&&href=&bootstrap.css&&/&
&&&&&link&rel=&stylesheet&&href=&mycss.css&&/&
&&&body&ng-controller=&MainCtrl&&
&&&&&h2&Inline&Edit&/h2&
&&&&&!--&input&id=&test&&value=&ddd&/&--&
&&&&&table&
&&&&&&&tr&
&&&&&&&&&th&name&/th&
&&&&&&&&&th&phone&/th&
&&&&&&&&&th&&/th&
&&&&&&&/tr&
&&&&&&&tr&ng-repeat=&employee&in&employees&&
&&&&&&&&&td&
&&&&&&&&&&&input&type=&text&&id=&#39;txt_name_{{employee.id}}&#39;&ng-model=&employee.name&&class=&inactive&&readonly&/&
&&&&&&&&&/td&
&&&&&&&&&td&&&input&type=&text&&ng-model=&employee.phone&&class=&inactive&&readonly&/&&/td&
&&&&&&&&&td&&edit&ng-Model=&employee&&ng-show=&showEdit&&&a&Edit&/a&&/edit&
&&&&&&&&&&&&&update&ng-Model=&employee&&ng-show=&!showEdit&&&a&Update&/a&&/update&&
&&&&&&&&&&&&&cancel&ng-Model=&employee&&ng-show=&!showEdit&&&|&&a&Cencel&/a&&/cancel&
&&&&&&&&&&|&&delete&ng-Model=&employee&&&a&Delete&/a&&/delete&
&&&&&&&&&&
&&&&&&&&&/td&
&&&&&&&/tr&
&&&&&/table&
&/html&在这里，我们使用一个&table&来显示所有的employee的name和phone,为了简单，我们这里只对employee
name进行修改。在这里，我们自定义三个标签，&edit&,&update&,&delete&我们来看其中一个标签，&edit&,这里呢，我们用ng-Model来绑定employee这个对象。这里，我们用angular的directive来对着三个标签进行事件的绑定angular的dirctive主要作用于DOM对象，而且他可以对Element Name (比如&edit&&/edit&)& 对应于& E:Attribute(比如&mytag edit=”express”&&/mytag& 对应于 AComment &!--&& my comment –&& 对应于& MClass &link class=”mycssclass”&&/link& 对应于 C默认对Attribute （A),当我们有app.directiv(&edit&,&function(){
&&&&restrict:&&E&，
&&&&.&.&.&.
});意思是说，我们要找到叫Element=”edit”的DOM对象，这里就是&edit&,当然你也可以携程 restrict: “AE”，那意思就是说要找到Element或者attribute = edit的DOM对象这里你可以随便对AEMC进行组合。当你找到之后呢，就要对这个DOM进行操作，对于我们来说，就是对他绑定一个click的事件app.directive(&edit&,&function(){
&&&&restrict:&&E&,
&&&&link:&function(scope,element){
&&&&&&element.bind(&click&,function(e){
&&&&&&&&alert(&I&am&clicked&for&editing&);
})这个时候呢，当你点Edit的时候呢，click事件就会触发。再往下呢就是对edit click事件的延伸，我们要得到employee name的inputbox，然后对他进行css的转换，比如当你click edit后，应该出现inputbox的css的inactive或者active的调整，并且移除readOnly这里要注意一件事，就是angular.copy，为什么使用angular.copy?这个是为后面的cancel做准备的，当你放弃修改的时候，你希望你的值恢复成原样，这个时候，对于angularJS来说，是要对model恢复原样。如何恢复修改之前的model?最简单的方法就是创建一个$scope.master = {}空的对象，然后在你click edit之后，马上把还没改变的model拷贝到这个空的master中去，把master作为一个临时的存储对象。当我们click Edit之后，我们要隐藏Edit,而叫Update | Cancel出现。这个时候$scope.showEdit就用上了，在&edit&，&update&,&cancel&上面都有一个ng-show，这个flag用来指定这个元素是不是要显示。ng-show=”showEdit”这个值是绑定$scope.showEdit的。Editapp.directive(&edit&,function($document){
&&&&restrict:&&#39;AE&#39;,
&&&&require:&&#39;ngModel&#39;,
&&&&link:&function(scope,element,attrs,ngModel){
&&&&&&&element.bind(&click&,function(){
&&&&&&&var&id&=&&txt_name_&&+ngModel.$modelValue.
&&&&&&&scope.$apply(function(){
&&&&&&&&&angular.copy(ngModel.$modelValue,scope.master);
&&&&&&&&&//console.log(scope.master);
&&&&&&&//console.log(id);
&&&&&&&var&obj&=&$(&#&+id);
&&&&&&&obj.removeClass(&inactive&);
&&&&&&&obj.addClass(&active&);
&&&&&&&obj.removeAttr(&readOnly&);
&&&&&&&scope.$apply(function(){
&&&&&&&&&scope.showEdit&=&
});CSS.inactive&{
&&&&border:&
&&&&background-color:&#
&&background-color:&#
}下面，我们要给Update做事件的绑定。这里就没用什么可说的了。Updateapp.directive(&update&,function($document){
&&&&restrict:&&#39;AE&#39;,
&&&&require:&&#39;ngModel&#39;,
&&&&link:&function(scope,element,attrs,ngModel){
&&&&&&element.bind(&click&,function(){
&&&&&&&&&alert(ngModel.$modelValue&+&&&is&updated,&Update&your&value&here.&);
&&&&&&&&&var&id&=&&txt_name_&&+ngModel.$modelValue.
&&&&&&&&&var&obj&=&$(&#&+id);
&&&&&&&&&obj.removeClass(&active&);
&&&&&&&&&obj.addClass(&inactive&);
&&&&&&&&&obj.attr(&readOnly&,true);
&&&&&&&&&&scope.$apply(function(){
&&&&&&&&&&&scope.showEdit&=&
&&&&&&&&&})
})在下面就是Cancel了，上面说过了，Cancel的时候要还原之前的值，这个时候呢，我们就用angular.copy把当时临时存储的$scope.master拷贝回model去app.directive(&cancel&,function($document){
&&&&restrict:&&#39;AE&#39;,
&&&&require:&&#39;ngModel&#39;,
&&&&link:&function(scope,element,attrs,ngModel){
&&&&&&element.bind(&click&,function(){
&&&&&&&&&scope.$apply(function(){
&&&&&&&&&&&angular.copy(scope.master,ngModel.$modelValue);
&&&&&&&&&&&//console.log(ngModel.$modelValue);
&&&&&&&&&})
&&&&&&&&&var&id&=&&txt_name_&&+ngModel.$modelValue.
&&&&&&&&&var&obj&=&$(&#&+id);
&&&&&&&&&obj.removeClass(&active&);
&&&&&&&&&obj.addClass(&inactive&);
&&&&&&&&&obj.prop(&readOnly&,true);
&&&&&&&&&&scope.$apply(function(){
&&&&&&&&&&&scope.showEdit&=&
&&&&&&&&&})
});最后就是Delete了，其实永远都要记住的事Angular是MVC，所以你这里你不用操心删除table行这样的事，只要删除model中emploee.id = @id就可以了Deleteapp.directive(&delete&,function($document){
&&&&restrict:&#39;AE&#39;,
&&&&require:&&#39;ngModel&#39;,
&&&&link:function(scope,&element,&attrs,ngModel){
&&&&&&element.bind(&click&,function(){
&&&&&&&&var&id&=&ngModel.$modelValue.
&&&&&&&&alert(&delete&item&where&employee&id:=&&+&id);
&&&&&&&&scope.$apply(function(){
&&&&&&&&&&for(var&i=0;&i&scope.employees.&i++){
&&&&&&&&&&&&if(scope.employees[i].id==id){
&&&&&&&&&&&&&&&console.log(scope.employees[i])
&&&&&&&&&&&&&&&scope.employees.splice(i,1);
&&&&&&&&&&&&}
&&&&&&&&&&}
&&&&&&&&&&console.log(scope.employees);
&&&&&&&&})
});基本上就完工了。这里我没有用任何现成的angular 插件，这只是对angular基本原理的阐述，如有误导或者有能简单的方法请指教。}