angularjs处理动态菜单的实现方法：
1、核心angularjs代码：
var testImg=angularmodule("appTest",["msleafMenu"])
controller('testCtr',['$scope',function($scope){
$scopedata=[{"id":"1","pid":"0","name":"第一行","children":[{"id":"3","pid":"1","name":"第一行11"},{"id":"4","pid":"1","name":"第一行12"}]},{"id":"2","pid":"0","name":"第二行","children":[{"id":"5","pid":"2","name":"第二行21"}]}];
}]);
angularmodule("msleafMenu",[])
directive('msLeafMenu',['$compile',function($compile){
return {
restrict:'EA',
transclude: true,
replace: false,
//template:"<li></li>",
scope:{
data:'=',
id:'@',
pid:'@',
pvalue:'@',
showname:'@',
isstandard:'@'
},
link:function(scope,element,attrs,leafController){
创建节点数据的方法：
function createTreeData(id,pid,pvalue){
var newData=[];
angularforEach(scopedata,function(item,index){
if(item[pid]==pvalue){
var children=createTreeData(id,pid,item[id]);
if(children && childrenlength>0){
itemchildren=children;
}
newDatapush(item);
}
});
return newData;
}
if(!scopeisstandard){
scopedata=createTreeData(scopeid,scopepid,scopepvalue);
}
//向节点增加数据
elementappend($compile('<ul class="ms_leaf_menu_group"><li ng-repeat="row in data" ng-class="{ms_parent_item:(rowchildren && rowchildrenlength>0),ms_child_item:(!rowchildren || rowchildrenlength<=0)}"><div ng-click="toogle($index)"><a >{{row[showname]}}</a><span class="glyphicon" ng-class="{\'glyphicon-chevron-right\':(rowchildren && rowchildrenlength>0 && !rowisopen),\'glyphicon-chevron-down\':(rowchildren && rowchildrenlength>0 && rowisopen)}" aria-hidden="true"></span></div><div ng-show="rowisopen"><ms-leaf-menu data="rowchildren" id="id" pid="pid" showname="{{showname}}" pvalue="{{row[id]}}"></ms-leaf-menu></div></li></ul>')(scope));
//此处是关键，调用入口处，需要找到index
scopetoogle=function(index){
scopedata[index]["isopen"]=!scopedata[index]["isopen"];
}
}
}
}]);
</script>
2、html代码：
<body ng-app="appTest">
<div ng-controller="testCtr" style=" width:200px; margin-left:auto; margin-right:auto;">
<ms-leaf-menu data="data" id="id" pid="pid" showname="name" pvalue="0"></ms-leaf-menu>
</div>
</body>
3、效果图
<input id="t1" name="a" type="text" />
<script>
documentgetElementById('t1')onblur=function(){
var tt=/^\d+$/g;
if(tttest(thisvalue)){
alert(' 正整数');
}else{
alert('非正整数');
}
}
</script>
使用方法
我们会做一个简单的检查来判断输入的是奇数还是偶数。 我们会创建一个方法在我们的AngularJS文件中：
// set the default value of our number
$scopemyNumber = 0;
// function to evaluate if a number is even
$scopeisEven = function(value) {
if (value % 2 == 0)
return true;
else
return false;
};
方法创建完成之后, 我们接下来要做的就是通过ng-show或者ng-hide来使用它，并传入我们的数字。通过方法传数字这种方法，可以保持Angular控制整洁和可测试。
<!-- show if our function evaluates to false -->
<div ng-show="isEven(myNumber)">
<h2>The number is even</h2>
</div>
<!-- show if our function evaluates to false -->
<div ng-show="!isEven(myNumber)">
<h2>The number is odd</h2>
</div>
推荐你使用angular-ui-grid，你描述的功能基本是属于grid范畴。引用angular-ui-grid的js文件，使用ui-grid，其中有属性方法得到选中的数据，然后通过service，以restful的形式将所选数据以json形式传到后台
以上就是关于如何使用angularjs处理动态菜单全部的内容，包括:如何使用angularjs处理动态菜单、angularJS如何判断输入的是正整数、如何使用 AngularJS 的 ngShow 和 ngHide等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）