Question

我在视图中使用angularjs ng-options和ng-model指令来设置选择选项，并在选择或更改下拉选项时得到通知。我还添加了额外的空选项，以便用户可以取消选择它，为此，我希望ng-model表达式中的值未定义。有什么办法吗？我尝试添加value ==“ {{undefined}}”，但这完全删除了空选项。

这是一个很简单的例子，如果我选择一个空选项，那么data.model应该是未定义的，但是在这里它为空。

https://plnkr.co/edit/d9Jzs4YgqpWHbOxonwa3?p=preview

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-select-ngvalue-production</title>


  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script src="app.js"></script>




    </head>
    <body ng-app="ngvalueSelect">
      <div ng-controller="ExampleController">
      <form name="myForm">
        <label for="ngvalueselect"> ngvalue select: </label>
        <select size="6" name="ngvalueselect" ng-model="data.model" multiple>

          <option label='' value="{{undefined}}"/>
          <option ng-repeat="option in data.availableOptions" ng-value="option.value">{{option.name}}</option>

        </select>
      </form>
      <hr>
      <pre>model = {{data.model === undefined | json}}</pre><br/>
    </div>
    </body>
    </html>

对应的app.js是

(function(angular) {
  'use strict';
angular.module('ngvalueSelect', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.data = {
     model: null,
     availableOptions: [
          {value: 'myString', name: 'string'},
          {value: 1, name: 'integer'},
          {value: true, name: 'boolean'},
          {value: null, name: 'null'},
          {value: {prop: 'value'}, name: 'object'},
          {value: ['a'], name: 'array'}
     ]
    };
 }]);
})(window.angular);

谢谢

Answer 1

您的代码有两个问题：

由于multiple属性，您的下拉列表允许多项选择。这意味着您的模型将存储选择数组。您正在寻找的值是数组的元素之一，但是在代码中，您正在将undefined与整个数组进行比较。
您的其他选项应使用ng-value而不是value属性。您不需要单独编写，可以将其添加到availableOptions对象中（作为{value: undefined, name: ''}）。

这是更新的插头： https://plnkr.co/edit/RXUlW6P7DX2wPZOazwe8?p=preview

将所选值设置为angualr.js中的undefined

1 个答案: