发表新帖
发表新帖

AngularJS null value for select

后端 未结
关注
9 912
攒了一身酷
攒了一身酷 2021-02-01 14:32

I couldn\'t find an elegant way for setting null values with a

相关标签:
9条回答
  • 梦如初夏
    2021-02-01 14:48

    Try using ng-options instead of manually creating tags, as in this example, lightly-edited from the Angular docs:

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

    The operative parts here are lines 17, defining a 'colors' object, and the ng-options attributes iterating over those colors to create options.

    0 讨论(0)
  • 悲&欢浪女
    2021-02-01 14:50

    You can use the ngOptions directive on the select. According to the documentation:

    Optionally, a single hard-coded <option> element, with the value set to an empty string, can be nested into the <select> element. This element will then represent the null or "not selected" option. See example below for demonstration.

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

    It's obviously a better idea to define the options list directly in the controller.

    0 讨论(0)
  • 不思量自难忘°
    2021-02-01 14:50

    If you REALLY want to use null, see below. You need to use ng-options and let Angular handle the mapping:

    <!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>
    0 讨论(0)
  • 生来不讨喜
    2021-02-01 14:53

    I ran into the same Problem but could not solve it via 'ng-options'. My solution is:

    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;
            });
        }
    };
}]);

    You can use it like this:

    <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>
    0 讨论(0)
  • 青春惊慌失措
    2021-02-01 14:53

    This is much easier on Angular2/Angular where you can just use

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

    This value is no longer a string, but a real null value.

    0 讨论(0)
  • 囚心锁ツ
    2021-02-01 14:59

    Can you try to use parseInt on the value? For example, both "1" and "0" will equal their respective integer values. If you run the empty string through parseInt you can easily get NaN.

    > parseInt("") = NaN

> parseInt("0") === 0

> parseInt("1") === 1
    0 讨论(0)
 看不清?
提交回复
热议问题