懒人口NG-选择 [英] ng-select with lazy population
问题描述
这是一个与第一填充然后填入相关的选择列表中的父记录编辑表单，然后它的预期值从父记录pre-选择组合框。
HTML
＆LT;选择NG模型=data.trackId＆GT;
＆LT;选项NG重复=轨道，轨道VALUE ={{track.id}}＆GT; {{track.name}}＆LT; /选项＆GT;
初始结果一旦父记录被拉出。
如果（数据）{
这$ scope.data.id = data.id。
这$ scope.data.name = data.name。
这$ scope.data.room = data.room。
这$ scope.data.start = data.start。
这$ scope.data.end = data.end。
这$ scope.data.dayId = data.day_id。
这$ scope.data.trackId = data.track_id。
这$ scope.data.color = data.color。
这$ scope.data.description = data.description。
这$ $范围适用于（）。
这$元素[0] .removeAttribute（风格）;
}
//后来跟踪的结果被拉扯
trackResult：功能（数据，状态，头，配置）{
对于（VAR I = 0; I＆LT; data.length;我++）{
这$ scope.tracks.push（数据由[i]）;
}
这$ $范围适用于（）。
}，
问题：
列表被从第二个呼叫填充 trackResult 但是从$ scope.trackId默认值不落的组合框的值。
编辑：控制器车身
控制器：功能（$范围，$元素）{
VAR自我=这一点;
这$范围= $范围;
这个元素$ = $元素;
这$ scope.data = {};
这$ scope.days = [];
这$ scope.tracks = [];
这$ scope.submit =功能（）{self.submit（）};
这$ scope.cancel =功能（）{self.cancel（）};
}，
修改：已更新设置从数据范围（OP要求）外
使用 NG-选项＆安培; NG-模型
这是我怎么想它应该angularjs完成。
使用内置的数据绑定功能，简化您的code，使它不那么复杂
绑定列表进入＆LT;选择方式＆gt; 和控制所选的项目，这个片段下面应该做的伎俩
http://jsfiddle.net/72em40j4/
JS
VAR的myapp = angular.module（'MyApp的'，[]）;
myapp.controller（Ctrl键，功能（$范围）{
$ scope.options = [];
$ scope.selectedOption = NULL;
}）;
HTML
＆LT;脚本＆GT;
功能clickFromOutside（）{
VAR controllerElement =的document.getElementById（'集装箱'）;
变种controllerScope = angular.element（controllerElement）.scope（）;
VAR firstTrack = {
ID：1，
第一：第一，
最后：'跟踪'
}; VAR secondTrack = {
ID：2，
第一秒'，
最后：'跟踪'
}; controllerScope.options.push（firstTrack）;
controllerScope.options.push（secondTrack）; controllerScope.selectedOption = secondTrack; 。controllerScope $适用（）;
}
＆LT; / SCRIPT＆GT;＆LT;按钮的onclick =clickFromOutside（）;＆GT;与外LT; /按钮＆GT;
＆LT; DIV NG-应用程序=的myapp＆GT;
＆LT;字段集ID =容器NG-控制器=CTRL＆GT;
＆LT;选择NG选项=p.first +''+ p.last在选项页上的NG-模式=selectedOption＆GT;＆LT; /选择＆GT; ＆LT; pre＆GT; {{selectedOption}}＆LT; / pre＆GT; ＆LT; /字段集＆GT;
＆LT; / DIV＆GT;
It's an edit form with parent record first populated then dependent select list is populated, and then it's expected the value from parent record pre-select the combo box.
html
<select ng-model="data.trackId" >
<option ng-repeat="track in tracks" value="{{track.id}}">{{track.name}}</option>
initial result once parent record is pulled.
if(data) {
this.$scope.data.id = data.id;
this.$scope.data.name = data.name;
this.$scope.data.room = data.room;
this.$scope.data.start = data.start;
this.$scope.data.end = data.end;
this.$scope.data.dayId = data.day_id;
this.$scope.data.trackId = data.track_id;
this.$scope.data.color = data.color;
this.$scope.data.description = data.description;
this.$scope.$apply();
this.$element[0].removeAttribute("style");
}
//later track results were pulled
trackResult: function(data, status, headers, config) {
for(var i=0; i<data.length; i++) {
this.$scope.tracks.push(data[i]);
}
this.$scope.$apply();
},
Problem:
List gets populated from the second call trackResult but default value from the $scope.trackId never sets the combo box to a value.
Edit: Controller Body
controller: function($scope, $element) {
var self = this;
this.$scope = $scope;
this.$element = $element;
this.$scope.data = {};
this.$scope.days = [];
this.$scope.tracks = [];
this.$scope.submit = function() {self.submit()};
this.$scope.cancel = function() {self.cancel()};
},
Edit : Updated with setting the data from outside the scope (OP request)
Use ng-options & ng-model
this is how i think it should be done in angularjs. use the built in databinding capabilities to simplify your code and make it less complicated
for binding a list into a <select> and controlling the selected item, this snippet below should do the trick.
http://jsfiddle.net/72em40j4/
js
var myapp = angular.module('myapp', []);
myapp.controller('Ctrl', function ($scope) {
$scope.options = [];
$scope.selectedOption = null;
});
html
<script>
function clickFromOutside() {
var controllerElement = document.getElementById('container');
var controllerScope = angular.element(controllerElement).scope();
var firstTrack = {
id: 1,
first: 'First',
last: 'Track'
};
var secondTrack = {
id: 2,
first: 'Second',
last: 'Track'
};
controllerScope.options.push(firstTrack);
controllerScope.options.push(secondTrack);
controllerScope.selectedOption = secondTrack;
controllerScope.$apply();
}
</script>
<button onclick="clickFromOutside();">outside</button>
<div ng-app="myapp">
<fieldset id="container" ng-controller="Ctrl">
<select ng-options="p.first + ' ' + p.last for p in options" ng-model="selectedOption"></select> <pre>{{ selectedOption }}</pre>
</fieldset>
</div>
这篇关于懒人口NG-选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
