angularJs

Question

我在 angular 中有一个数据集，我在其中添加了一个默认值，如下所示：

            vm.serviceProperties.serviceCategories = clientcontext.clientlookup.serviceCategoryLookups();
            vm.serviceProperties.serviceCategories.splice(0, 0, { 'serviceCategoryId': 0, 'serviceCategoryDisplayName': 'All' });

我需要将此数据集绑定到两个 select 控件。首先，我需要将 'All' 值显示为默认值。另一方面，我根本不需要 'All' 值。

如何使用相同的数据集实现这一点？我记得我在某个地方看到过，如果不在数据集本身中定义默认值，我们可以在 .如下所示：

<select>
  <option> default</option>
  <option ng-repeat="the dataset"></option>
</select>

但我不确定如何正确执行。

Answer 1

在控制器上创建一个属性来确定是否显示默认选项。

控制器

app.controller('servicePropertiesWithDefault', function() {
    $scope.showDefault = true;
});

app.controller('servicePropertiesWithoutDefault', function() {
    $scope.showDefault = false;
});

然后在模板中我们使用 ng-if 通过传入 showDefault 作为表达式来显示或隐藏 default 选项。使用 ng-if 优于 ng-show，因为它从 DOM.

中删除元素

模板

<select>
  <option ng-if='showDefault'> default</option>
  <option ng-repeat="the dataset"></option>
</select>

angularJs - 将同一个数据集绑定到两个 <select> 元素，一个有默认值，另一个没有

angularJs - bind same dataset to two <select> elements, one with default value and the other without

drop-down-menu

angularjs-ng-repeat

default-value