AngularJS null value for select

后端 未结 9 915
攒了一身酷
攒了一身酷 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)
提交回复
热议问题