web-dev-qa-db-ja.com

選択のためのAngularJS null値

AngularJSを使用して<select>でnull値を設定するエレガントな方法を見つけることができませんでした。

HTML

<select ng-model="obj.selected">
  <option value=null>Unknown</option>
  <option value="1">Yes</option>
  <option value="0">No</option>
</select>

{{obj}}

JS：

$scope.obj ={"selected":null};

ページがロードされると、最初のオプションが選択されます。これは適切であり、出力は{"selected":null}です。別のオプションに切り替えた後にその最初のオプションが再選択されると、出力は{"selected":"null"}（引用符付き）になりますが、これは期待したとおりではありません。

実行例： http://plnkr.co/edit/WuJrBBGuHGqbKq6yL4La

マークアップ<option value=null>が正しくないことを知っています。 <option value="">でも試しましたが、空の文字列に対応し、nullではありません。したがって、最初のオプションは選択されず、デフォルトで最初の選択が選択された後に消える別のオプションです。

何か案が ？

javascripthtmlhtml5angularjs
35
Juljan

これはあなたのために働くはずです：

コントローラ：

  function MyCntrl($scope) {
    $scope.obj ={"selected":null};
    $scope.objects = [{id: 1, value: "Yes"}, {id: 0, value: "No"}]
  }

テンプレート：

  <div ng-controller="MyCntrl">

    <select ng-model="obj.selected"
            ng-options="value.id as value.value for value in objects">
            <option value="">Unknown</option>
    </select>

<br/>
     {{obj}}
  </div>

Working plnkr

Selectではng-optionsを使用する必要があります。

38
Wawy

ngOptionsで select ディレクティブを使用できます。ドキュメントによると：

オプションで、値が空の文字列に設定された単一のハードコードされた<option>要素を、<select>要素にネストできます。この要素は、nullまたは「選択されていない」オプションを表します。デモンストレーションについては、以下の例を参照してください。

<select ng-model="obj.selected" ng-options="key as label for (key, label) in ['No', 'Yes']">
  <option value="">Unknown</option>
</select>

コントローラーでオプションリストを直接定義することは、明らかに良いアイデアです。

17
Blackhole

この例のように、手動でタグを作成する代わりにng-optionsを使用してみてください。Angular docs：

http://plnkr.co/edit/DVXwlFR6MfcfYPNHScO5?p=preview

ここでの操作部分は17行目で、「色」オブジェクトを定義し、ng-options属性はこれらの色を反復してオプションを作成します。

3
chrispittman

本当にnullを使用する場合は、以下を参照してください。 ng-optionsを使用して、Angularマッピングを処理する必要があります。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Color selector</title>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js"></script>

</head>
<body ng-app="">
    <script>
  function MyCntrl($scope) {
    $scope.obj ={"selected":null};
    $scope.objStates = [{key:"Unknown", value:null}, {key:"Yes", value:1}, {key:"No", value:0}]

    $scope.$watch('obj.selected', function(newVal){
      console.log(newVal);
    })
  }
  </script>
  <div ng-controller="MyCntrl">

    <select ng-model="obj.selected" ng-options="state.value as state.key for state in objStates">
    </select>

<br/>
     {{obj}}
  </div>
</body>
</html>
2
Andrew Church

同じ問題にぶつかりましたが、「ng-options」で解決できませんでした。私の解決策は次のとおりです。

module.directive('modelToNull', [function () {
    return {
        scope: {
            check: "&modelToNull"
        },
        require: 'ngModel',
        link: function ($scope, element, attrs, ngModelController) {
            ngModelController.$parsers.Push(function (value) {
                return value == null || $scope.check({value: value}) ? null : value;
            });
        }
    };
}]);

次のように使用できます。

<select ng-model="obj.selected" model-to-null="value == 'null'">
  <option value="null">Unknown</option>
  <option value="1">Yes</option>
  <option value="0">No</option>
</select>
2
Robert.MD

値にparseIntを使用してみることができますか？たとえば、両方の"1"および"0"はそれぞれの整数値に等しくなります。 parseIntを介して空の文字列を実行すると、NaNを簡単に取得できます。

> parseInt("") = NaN

> parseInt("0") === 0

> parseInt("1") === 1
0
Ishan Chatterjee

これは、Angular2/Angularで簡単に使用できます。

<option [value]="null">Unknown</option>

この値は文字列ではなく、実際のヌル値です。

0
MEhran