1

私は自分のプロジェクトで AngularJs を使用しており、viewModel にドロップダウン (< select >) に接続されているプロパティがあります。

そのドロップダウンには空の値の魔女がデフォルトで選択されています。私が望むのは、ユーザーが他の値を選択した後にその空の値を選択できないようにすることです。

私は$watchに目を向け始めましたが、「そのプロパティの変更」をキャンセルする方法があるかどうかはわかりません。次のようなものです。

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

どんなアイデアでも、これは基本的なアイデアです。より高度な開発では、ユーザーに確認を求める必要があります。

何か案は？

4

4 に答える 4

2

私が欲しいのは、ユーザーが他の値を選択した後、その空の値を選択できないようにすることです

最初にng-modelプロパティに値を割り当てない限り、これは自動的に行われます。したがって、<select>以下に示すものを使用して、コントローラーで$scope.selected_yearを初期化しないでください。

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

リストが最初に表示されるとき、$ scope.selected_yearは現在有効なオプション/値に設定されていないため、AngularはこのようなオプションをHTMLに追加します。

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

有効な選択肢を選択すると、そのオプションは魔法のように消えるので、ユーザーはそれを再度選択できなくなります。このフィドルで試してみてください。

選択リストが最初に表示されたときにng-modelプロパティにすでに有効な値が割り当てられている場合は、文書化されていないng-changeパラメーターにコントローラー関数を割り当てることができます。

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

関数preventUserFromDoingXzy（）内で、ユーザーが選択できるものを制御したり、モデルを変更したりするために必要なことを実行できます。

于 2013-01-04T15:58:19.483 に答える
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 に答える
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 に答える