这基本上是一个由两部分组成的问题,这就是为什么我在StackOverflow上找到的其他一些答案没有充分满足我的要求的原因。
还需要注意:使用Bootstrap。
我的简化html可以这样解释:
<div class="container-fluid">
<div class="row"> Headers </div>
<div class="ParentObjectDiv" ng-repeat="pobj in pobjlist">//pobj list is returned from call in controller
<div class="row"> ParentObject values </row>
<div class="ChildObjectContainer">
<div class="row"> Headers </div>
<div class="ChildObjectDiv" ng-repeat="cobj in pobj.cobjs">
<div class="row">
<div class="col-md-1">
<select ng-model="cobj.someproperty"
ng-options="option for option in optionlist">
//Here is the issue : the optionlist is returned from a separate call in the constructor
//The cobj.someproperty can be null, and when that's the case, I want a custom selection
//that says please select a property
</select>
</div>
</div>
</div>
</div>
</div>
</div>
好的,继续我尝试过的。
出于明显的原因,无法在控制器中执行selectedOption =“ whatever”。
我尝试添加一个角度表达式,如果它检测到该属性为空/空,则将cobj.someproperty的属性设置为类似“值未知”的值。
这可能归结为我对角度的基本误解。我已经尝试将在各种表达式指令中以及仅在html本身中为该属性分配“未知”值的表达式。不能在数据库的实际对象上具有此“未知”值,并且Pobj及其Cobj的列表非常大,所以我认为我无法在渲染前重复遍历整个列表结构以对其进行设置然后在ng-repeats中再次进行迭代。我希望我可以有一个快速的表达式来评估null并将其设置。就像是:
{{cobj.someproperty = cobj.someproperty ? cobj.someproperty : "value not known"}}
但是不确定那是否是一个有效的表达式,以及它是否可以放在我的位置,因为到目前为止,我已经尝试将其放在ng-model本身,ng-if和html中的空白行中, ng-repeat中的cobj,但没有起作用。
我没有“尝试过”这个问题,但是我更喜欢的解决方案以及我一直在研究的解决方案是查看是否有一种方法可以代替评估和更改cobj.someproperty,从而将select的ng-model更改为指向虚拟属性,如果设置了某些属性,则同时将cobj.dummyproperty设置为cobj.someproperty,否则将其设置为“未知值”。
其他注意事项:
父对象列表可能很大(> 1k),平均有3个子对象(但可以有1到20个子对象),因此性能是一个问题。
在许多情况下,用户将不希望设置此属性,因此当null成为临时值时,“未知值”将不复存在。
如果用户后来意识到自己对cobj.someproperty错误,则还需要能够选择“未知值”。
我将研究逻辑,以便稍后将更改推回数据库,因此我不必担心值如何以角度存储在模型中,因为我极有可能不会使用ng-model更新字段。现在,我只是担心下拉菜单的选定选项。
最佳答案
这是简化html的答案。
JavaScript代码
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [{
"someProperty": "abc"
}, {
"someProperty": "xyz"
}, {
"someProperty": null
}]
$scope.optionlist = ["abc","xyz","pqr"];
});
HTML代码:
<table ng-controller="MainCtrl" >
<tbody>
<tr ng-repeat="item in items track by $index">
<td width="75%">
{{ item.someProperty }}
</td>
<td width="25%">
<select ng-model="item.someProperty" >
<option value="">Value not know</option>
<option value="{{option}}" ng-repeat="option in optionlist">{{option}}</option>
</select>
</td>
</tr>
</tbody>
因此,每当angular为
someProperty
找到空值时,它将值绑定到“未知值”。我使用的是ngRepeat
而不是ngOption
。让我知道这是否是您想要的。这是my plunk