1

我在我的项目中使用 AngularJs，并且我的 viewModel 上有一个属性，它连接到下拉列表（< select >）

该下拉菜单默认选择一个空值，我想要的是防止用户在选择其他值后选择该空值。

我开始关注 $watch，但我不知道是否有某种方法可以取消“更改该属性的 oof”，如下所示：

$scope.$watch('myProp', function (newVal, oldVal, scope) {
    if (newVal) { scope.preventDefault(); }
}

任何想法，这是基本想法，在更高级的开发中，我需要询问用户确认。

有任何想法吗？

4

4 回答 4

2

您可以添加ng-required到选择。如果模型没有初始值，则将添加一个空选项，并在更改为有效值时删除该空选项

编辑 jsFiddle 以恢复到以前的值并包含ng-change指令。

从文档：

当值更改来自模型时，不会评估表达式。

这对于不干扰更改侦听器并在恢复$apply函数中的旧值时创建无限循环很有用

控制器

$scope.options = [{value: 'abc'},{value: 'def'}];

var confirmDialog = function(newVal, yes, no) {
    // obviously not a good way to ask for the user to confirm
    // replace this with a non blocking dialog

    //the timeout is only for the confirm since it's blocking the angular $digest
    setTimeout(function() {
        c = confirm('Is it ok? [' + newVal.value + ']');
        if(c) {
            yes();
        }
        else {
            no();
         }
    }, 0);
};

//Asking for confirmation example
function Ctrl($scope) {
    $scope.options = [{value: 'abc'},{value: 'def'}];

    $scope.select = undefined;
    var oldSelect = undefined;
    $scope.confirmChange = function(select) {
        if(oldSelect) {
            confirmDialog(select,
                 function() {
                    oldSelect = select;
                 },
                 function() {
                    $scope.$apply(function() {$scope.select = oldSelect;});
                });
        }
        else {
            oldSelect = select;
        }
    }
}

模板

<div ng-controller="Ctrl">
  <select ng-model="select" ng-options="o.value for o in options"
          ng-required ng-change="confirmChange(select)">
  </select>
</div>
于 2013-01-04T15:54:23.597 回答
2

我想要的是防止用户在选择其他值后选择该空值

只要您最初没有为 ng-model 属性分配值，这应该会自动为您发生。因此，使用<select>如下所示，不要在控制器中初始化 $scope.selected_year：

<select ng-model="selected_year" ng-options="year for year in years"></select>

当列表最初显示时，Angular 会在 HTML 中添加这样的选项，因为 $scope.selected_year 当前没有设置为有效的选项/值：

<option value="?" selected="selected"></option>

选择有效选项后，该选项将神奇地消失，因此用户将无法再次选择它。试试这个小提琴。

如果 ng-model 属性在首次显示选择列表时已经分配了一个有效值，那么您可以将控制器函数分配给未记录的ng-change 参数：

<select ... ng-change="preventUserFromDoingXzy()">

在函数 preventUserFromDoingXzy() 中，您可以执行您需要执行的操作来控制用户可以选择的内容，或修改模型。

于 2013-01-04T15:58:19.483 回答
0

可能最简单、最干净的做法是添加一个初始选项并disabled对其进行设置：

<option value="?" selected="selected" disabled></option>
于 2015-05-27T20:07:58.740 回答
-1

实际上，删除空值更容易。假设您有一个选项列表：

$scope.options = [{value: ''}, {value: 'abc'},{value: 'def'}];

和一个select：

<select ng-model="select" ng-options="o.value for o in options"></select>

然后$watch是模型：

$scope.$watch('select', function(value) {
    if (value && value !== '') {
        if ($scope.options[0].value === '') {
            $scope.options = $scope.options.slice(1);
        }
    }
}, true);

在这里查看它的实际应用。

PS 不要忘记 $watch 中的 objectEquality 参数，否则它将不起作用！

于 2013-01-04T12:38:27.753 回答