有關angularjs的select説明

2015-04-24 21:41:00
hainuo
原創 3008
摘要:級聯菜單多級選擇cascade
關於ngselect的使用説明ng select默認使用的是json對象默認的序列,但是當序列不匹配時就齣齣問題如 下文件中的數據(PHPer請使用unserialize,來反序列化爲數組後使用)SubjectTreeData.txt這箇從後颱傳遞到前颱 PHPer請使用json_encode方法來將這箇東西生成json對象 傳遞到前端前端循環對象時不能夠使用```<select class="form-control" ng-model="vm.lei"        ng-options="lei.name for  lei in vm.leis">必鬚使用一下方式方可<select class="form-control" ng-model="vm.lei"        ng-options="lei.name for (loation, lei) in vm.leis track by lei.location">```其實  主要就是爲瞭生成這樣子的對象<option value="這裡是locaiton的值" label="這裡是name的值">這裡是name的值`</option>`生成的列錶樣式如下原因在於如圖![blob.png](/ueditor/php/upload/image/20150424/1429883014444647.png)在json對象中我給每一箇子對象定義瞭一箇鍵名,導緻angularjs在尋址__KEY__的時候不能夠排列上,從而不會在選項卡中列齣另外後麵的那箇track by lei.location也要寫清楚,告訴ng是按照什麽來填入option的value值具體還是請大傢欣賞英文的説明這裡給齣我的腳本寫的方式  這裡沒有使用directive 主要原因是自己還不太會寫directive主要蔘考對象http://www.ngnice.com/showcase/#/select/cascade 對其控製器部分做瞭修改```.controller('AppController', function ($scope, $http) {    var vm = $scope.vm = {};    $http.post(Api('subjectListData')).success(            function (data) {                if (data.code == '1001') {                    //console.log(data.data);                    vm.leis = data.data;                    vm.lei = {location: 0, name: '請選擇類'};                    // 更換國傢的時候清空省                    $scope.$watch('vm.lei', function (lei) {                    //判斷後端傳遞過來的值存在 直接更改對應的下拉列錶的值 註意必鬚要使用他的上級對象的索引,而不是另賦值對象過來                        if ('{$kuan}' != null || '{$kuan}' != 'undefined')                            vm.kuan = lei.children[{$kuan}];                        else                            vm.kuan = null;                        if (lei.code != 'undefined' || lei.code !== null)                            vm.code = lei.code;                        else                            vm.code = null;                    });                    // 更換省的時候清空城市                    $scope.$watch('vm.kuan', function (kuan) {                        if ('{$xiang}' != null || '{$xiang}' != 'undefined')                            vm.xiang = kuan.children[{$xiang}];                        else                            vm.xiang = null;                        console.log({$xiang}, vm.xiang);                        if (kuan.code != 'undefined' || kuan.code !== null)                            vm.code = kuan.code;                        else                            vm.code = lei.code;                    });                    $scope.$watch('vm.xiang', function (xiang) {                        if ('{$mu}' != null || '{$mu}' != 'undefined')                            vm.mu = xiang.children[{$mu}];                        else                            vm.mu = null;                        if (xiang.code != 'undefined' || xiang.code !== null)                            vm.code = xiang.code;                        else                            vm.code = kuan.code;                    });                    $scope.$watch('vm.mu', function (mu) {                        if (mu.code != 'undefined' || mu.code !== null)                            vm.code = mu.code;                        else                            vm.code = xiang.code;                    });                    //處理默認值                    vm.lei = vm.leis[{$lei}];                } else                    show_message($scope, 1, data.info);            }    );    //處理默認值});```
發錶評論
玖 乘 陸 =
評論通過審核後顯示。