动态形式父子组合 [英] Dynamic form with parent child combos
问题描述
我很新的AngularJS和观看一些视频pluralsight我决定用它来建立一个简单的网页后。
I am very new to AngularJS and after watching some pluralsight videos I decided to build a simple web page using it.
该页面应该最初它是由一个Ajax请求填充一个选择框加载（这包含了所有的数据）。然后，基于所选择的值，一个新的选择元件可能需要包含子数据被创建。直到一个选项被选择一个没有孩子的id这将继续发生。数据我回来从API的格式如下：
The page should initially load with one select box which is populated by an ajax request (this contains all of the data). Then, based on the value selected, a new select element may need to be created containing the child data. This will continue to happen until an option is selected that has no child ids. The format of data I get back from the api is as follows.
[ { "ChildIds" : [ ],
"Id" : "1",
"Name" : "Top Level",
"ParentId" : null
},
{ "ChildIds" : [ "51" ],
"Id" : "22",
"Name" : "LevelA - 1",
"ParentId" : "1"
},
{ "ChildIds" : [ "38",
"26"
],
"Id" : "24",
"Name" : "LevelA - 2",
"ParentId" : "1"
},
{ "ChildIds" : [ ],
"Id" : "38",
"Name" : "LevelB - 1",
"ParentId" : "24"
},
{ "ChildIds" : [ ],
"Id" : "26",
"Name" : "LevelB - 2",
"ParentId" : "24"
},
{ "ChildIds" : [ ],
"Id" : "51",
"Name" : "LevelB - 3",
"ParentId" : "22"
},
{ "ChildIds" : [ "43",
"21"
],
"Id" : "36",
"Name" : "LevelC - 1",
"ParentId" : "26"
},
{ "ChildIds" : [ ],
"Id" : "43",
"Name" : "LevelD - 1",
"ParentId" : "36"
},
{ "ChildIds" : [ ],
"Id" : "21",
"Name" : "LevelD -2",
"ParentId" : "36"
}
]
我设法用硬codeD中选择元素，但想要让这个充满活力得到这个工作。
I have managed to get this working by using hard coded select elements but want to make this dynamic.
HTML
<div class="container">
<div ng-controller="organisationalUnitCtrl">
<select class="form-control" ng-model="root" ng-options="ou.Name for ou in ous | filter:{ParentId:'!'}">
<option value="">-- choose organisation unit --</option>
</select>
<select class="form-control" ng-model="child" ng-options="ou.Name for ou in ous | filter:{ParentId:root.Id}">
<option value="">-- choose organisation unit --</option>
</select>
<select class="form-control" ng-model="child2" ng-options="ou.Name for ou in ous | filter:{ParentId:child.Id}">
<option value="">-- choose organisation unit --</option>
</select>
<select class="form-control" ng-model="child3" ng-options="ou.Name for ou in ous | filter:{ParentId:child2.Id}">
<option value="">-- choose organisation unit --</option>
</select>
</div>
</div>
控制器
bristowRiskApp.controller('organisationalUnitCtrl',
function organisationalUnitCtrl($scope, organisationalUnitData) {
$scope.ous = organisationalUnitData.getOrganisationalUnit();
}
);
服务
bristowRiskApp.factory('organisationalUnitData', function ($http, $q) {
return {
getOrganisationalUnit: function () {
var deferred = $q.defer();
$http({ method: 'GET', url: 'http://localhost:53995/api/organisationalunit' }).
success(function (data, status, headers, config) {
deferred.resolve(data);
}).
error(function (data, status, headers, config) {
deferred.reject(status);
});
return deferred.promise;
}
}
});
我已阅读，你不应该在操作控制器中的DOM。所以，我猜测我应该为我的选择元素指令监听的onChange事件并创建新的选择元素？我该怎么做呢？是否有任何的例子在那里，我可以借鉴的？
I have read that you should not manipulate the DOM in the controller. So, I am guessing that I should create a directive for my select element that listens for onChange events and creates the new select element? How do I do this? Are there any examples out there that I could learn from?
另外一个问题，我面对我的硬盘codeD的例子是，在选择改变的值只涟漪下一个组合。例如，如果在所有四个选择框被选中的值，在第二个改变的值会正确重置第三个框，但第四仍将包含选定的选项。我认为变化将一路下跌波及。
One other issue I face with my hard coded example is that changing a value in a select only ripples to the next combo. For example, if values were selected in all four select boxes, changing a value in the second one would correctly reset the third box but the fourth will still contain the selected option. I thought the change would be rippled all the way down.
感谢
史蒂芬
推荐答案
让我知道如果/为什么这不工作，我会相应地解决它。我认为关键的事实是，在选择复读机呀你不是使用语法来指定选项的ID - 你只是在做它的标签
Let me know if/why this doesn't work and I'll fix it accordingly. I think the key fact is in the options repeater you weren't using the syntax to specify the ID of the option - you were just doing its label.
HTML
<div ng-app="bristowRiskApp" ng-controller="organisationalUnitCtrl">
$scope.selections: <pre>{{ selections | json }}</pre>
<div ng-repeat="i in range(selections.length - 1)">
<cascade-select data="data" parent-id="selections[i]" selected-id="selections[i + 1]"></cascade-select>
</div>
</div>
的JavaScript
var bristowRiskApp = angular.module('bristowRiskApp', []);
bristowRiskApp.controller('organisationalUnitCtrl',
function organisationalUnitCtrl($scope) {
$scope.data = [ /* ... */ ];
$scope.selections = [ null, null ];
$scope.$watch('selections', function (value) {
if (value[value.length - 1] !== null || value.length < 2) {
value.push(null);
} else {
var index = value.indexOf(null, 1);
if (0 < index && index < value.length - 1) {
$scope.selections = value.slice(0, index);
}
}
}, true);
// Helper function.
$scope.range = function (n) {
var result = [];
for (var i = 0 ; i <n; i++) {
result.push(i);
}
return result;
};
});
bristowRiskApp.directive('cascadeSelect', function () {
return {
restrict: 'E',
replace: true,
scope: {
parentId: '&',
selectedId: '=',
data: '='
},
template: '<select ng-show="(data | filter:byId).length > 0" ng-model="selectedId" ng-options="d.Id as d.Name for d in data | filter:byId"><option value="">-- choose organisation unit --</option></select>',
link: function (scope, element, attrs) {
scope.byId = function (d) {
return d.ParentId === scope.parentId();
};
}
}
});
这篇关于动态形式父子组合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
