我可以强制选择带有ng-Options的硬编码选项吗?

时间:2015-03-09 13:32:47

标签: angularjs

似乎当带有ng-Options的<select>的列表(对象数组)加载了一些延迟时(从API加载列表时,以及当我使用带有$的静态列表时)超时)此列表在硬编码选项后添加,因此硬编码选项成为列表中的最后一个。

这是指令模板:

<select ng-model="listId" ng-options="l.id as l.descr for l in List">
    <option value="" ng-if="textWhenNull">{{textWhenNull}}</option>
</select>

这是指令:

.directive('showMyList', ['myStorage','$timeout', function (myStorage, $timeout) {
      return {
         restrict: 'CE',
         template: $('#myListTemplate').html(),
         scope: {
            listId: '=',
            textWhenNull: '@'
         },
         link: ($scope, $element, $attrs) => {
            // commented out the API call:
            //myStorage.readList().then(function (data) {
            //   $scope.List = data;
            //});
            $timeout(function () {
               $scope.List = [
                  { 'descr': 'option 1', 'id': 1 },
                  { 'descr': 'option 2', 'id': 2 },
                  { 'descr': 'option 3', 'id': 3 },
               ];
            }, 40);
         }
      };
   }])

并像这样使用它:

<div class="show-my-list" list-id="formData.listId" text-when-null="(nothing filled in)">
</div>

结果:

option 1
option 2
option 3
(nothing filled in)

我想要的是什么:

(nothing filled in)
option 1
option 2
option 3

注意
因为API中的列表已经有了正确的顺序,所以我宁愿使用orderby!除非 - 当然 - 如果这是唯一的解决方案。

不知道这是否应该被视为一个错误,但它绝对是反直觉的(对我而言)。

更新
@ZackPatterson建议这可能是由ng-if。

引起的

文档说:

  

如果分配给ngIf的表达式求值为false,则从DOM中删除该元素,否则将元素的克隆重新插入DOM。

但是当我超时4000毫秒时,我可以清楚地看到硬编码选项已经存在。然后添加列表,但列表选项在硬编码选项之前添加。所以这似乎不是问题。

1 个答案:

答案 0 :(得分:0)

我已经使用ng-hide(或ng-show)而不是ng-if对问题进行了排序。它具有相同的行为,只有在我没有选定值并且始终将选项添加为第一个选项时才显示该选项。