0

我遇到了以下我觉得很奇怪的事情。我没有被它阻止，但很好奇是否有人知道。当我将 hasOwnProperty 与选择选项一起使用时，它会显示一个不在下拉列表中的值（A2F0C7）。。有人可以分享为什么会这样吗？这是jsfiddle：

http://jsfiddle.net/stampyNY/2oeo8of9/1/

<div ng-controller="TestCtrl">
    <select>
        <option ng-repeat="(k,v) in items" ng-show="v.hasOwnProperty('test')" value="{{k}}">{{k}}</option>
    </select>
var app = angular.module('app', []);

function TestCtrl($scope) {
    $scope.items = {
                 'A2F0C7':{'secId':'12345', 'pos':'a20'},
                 'C8B3D1':{'pos':'b10'},
                 'WAM':{'test': 1, 'pos':'b10'}
               };
}

谢谢你！

4

2 回答 2

0

在 angularJS 中，当您添加“ng-show={{expression}}”时，表达式将被验证（真或假）并添加样式“display: none;” 分别。结果，您将在 HTML 中呈现一些内容：

<select>
    <!-- ngRepeat: (k,v) in items -->
    <option ng-repeat="(k,v) in items" ng-show="v.hasOwnProperty('test')" value="A2F0C7" class="ng-scope ng-binding" style="display: none;">A2F0C7</option>
    <option ng-repeat="(k,v) in items" ng-show="v.hasOwnProperty('test')" value="C8B3D1" class="ng-scope ng-binding" style="display: none;">C8B3D1</option>
    <option ng-repeat="(k,v) in items" ng-show="v.hasOwnProperty('test')" value="WAM" class="ng-scope ng-binding">WAM</option>
</select>

添加此样式后，该值将不会显示在您的下拉框中，但默认情况下，将为 html select 标签选择第一个值。这就是你看到这个值的原因（尽管它不应该）。

要解决此问题，只需通过添加 ng-selected 来更新您的代码：

<select>
    <option ng-repeat="(k,v) in items" ng-show="v.hasOwnProperty('test')" ng-selected="v.hasOwnProperty('test')" value="{{k}}">{{k}}</option>
</select>
于 2015-07-15T11:54:43.690 回答
0

正如之前发布的那样，ng-show 只是控制 DOM 对象的可见性，这不会阻止它最初被选中。最好不要为不可见的条目创建实际的 DOM 元素。

这可以使用自定义过滤器来完成：

app.filter('filterTestProperty', function() { 
   return function(values) {
      var result = {};
      for (var key in values){
          var value = values[key];
          if (value.hasOwnProperty('test')){
              result[key] = value;
           }
      }
      return result;
   }
});

和 HTML：

<option ng-repeat="(k, v) in items | filterTestProperty" value="{{k}}">{{k}}</option>


var app = angular.module('app', []);

app.filter('filterTestProperty', function() {
  return function(values) {
    var result = {};
    for (var key in values) {
      var value = values[key];
      if (value.hasOwnProperty('test')) {
        result[key] = value;
      }
    }
    return result;
  }
});

app.controller('TestCtrl', function TestCtrl($scope) {
  $scope.items = {
    'A2F0C7': {
      'secId': '12345',
      'pos': 'a20'
    },
    'C8B3D1': {
      'pos': 'b10'
    },
    'WAM': {
      'test': 1,
      'pos': 'b10'
    }
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="TestCtrl">
  <select>
    <option ng-repeat="(k, v) in items | filterTestProperty" value="{{k}}">{{k}}</option>
  </select>
</div>

于 2015-07-15T12:29:50.097 回答