ng-repeat内部的角度下拉,以及所选选项

时间:2016-05-03 17:30:10

标签: javascript angularjs

这基本上是一个2部分的问题,这就是为什么我在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>

好的,等我试过的。

  1. 不能做一个selectedOption =&#34;无论什么&#34;在控制器中出于显而易见的原因。

  2. 我尝试添加一个角度表达式,将cobj.someproperty的属性设置为类似&#34;值不知道&#34;如果它检测到属性为空/ null。

    这可能归结为我对角度的基本误解。我试过把表达这个&#34;不知道&#34;各种表达式指令中的属性值,以及html本身的值。不能选择这个&#34;不知道&#34;数据库中实际对象的值以及Pobj和它们的Cobj的列表是非常大的,所以我不认为我可以在渲染之前迭代​​整个列表结构来设置它然后在ng-repeats中再次迭代它。我希望我能有一个快速表达式来计算null并设置它。类似的东西:

    {{cobj.someproperty = cobj.someproperty ? cobj.someproperty : "value not known"}}
    

    但不确定这是否是一个有效的表达方式,如果它是我要放的地方,因为到目前为止我已经尝试将它放入ng-model本身,ng-if,只是一片空白html行在ng-repeat中的cobj范围内都没有工作。

  3. 我没有&#34;尝试&#34;这个,但我首选的解决方案和我一直在研究的方法是看看是否有办法代替评估和更改cobj.someproperty,将select的ng-model更改为指向虚拟属性如果设置了某个属性,同时将cobj.dummyproperty设置为cobj.someproperty,否则将其设置为&#34;值未知&#34;。

  4. 其他考虑因素:
    父对象列表可能非常大(> 1k)并且平均有3个子对象(但可以有1到20个),因此性能是个问题。
    在许多情况下,用户不希望设置此属性,因此&#34;值未知&#34;当null不是临时的东西时 用户还需要能够选择&#34;值未知&#34;如果他们后来意识到他们对cobj.someproperty的错误 我将继续研究将更改推回到数据库的逻辑,因此我并不担心值如何以角度存储在模型中,因为我很可能不会使用ng-model来更新字段。现在我只是担心下拉的选定选项。

1 个答案:

答案 0 :(得分:1)

这是简化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 code:

<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的空值,它就会将值绑定到&#34;值不知道&#34;。我使用ngRepeat代替ngOption。如果您正在寻找,请告诉我。

这里是my plunk