Javascript 使用ng选项过滤json对象_Javascript_Json_Angularjs_Ng Options

Javascript 使用ng选项过滤json对象

javascript json angularjs

Javascript 使用ng选项过滤json对象,javascript,json,angularjs,ng-options,Javascript,Json,Angularjs,Ng Options,我在使用AngularJS将json对象过滤到select表单元素时遇到问题。这是我到目前为止得到的。我被难倒了，任何帮助都将不胜感激 app.js： singlepageapp.html：当前结果：福酒吧废话预期结果：福酒吧废话您始终可以重复html中的选项，而不使用data ng选项。我做了一把小提琴，你想要什么就做什么： {{item.name} 通过这种方式，可以直接使用作用域VAL设置值希望这有帮助您应该指定item.id <select ng

我在使用AngularJS将json对象过滤到select表单元素时遇到问题。这是我到目前为止得到的。我被难倒了，任何帮助都将不胜感激

app.js： singlepageapp.html：

当前结果：


福
酒吧
废话

预期结果：


福
酒吧
废话

您始终可以重复html中的选项，而不使用data ng选项。我做了一把小提琴，你想要什么就做什么：


{{item.name}

通过这种方式，可以直接使用作用域VAL设置值

希望这有帮助

您应该指定item.id

<select ng-model="selected" ng-options='item.id as item.name for item in items'>               </select>

从

注意：ngOptions为元素提供了迭代器功能，当您希望将select模型绑定到非字符串值时，应该使用该迭代器功能，而不是ngRepeat。这是因为option元素目前只能绑定到字符串值

我更新了JSFIDLE

可能重复@CD。。对ng选项的工作方式非常混乱，这有助于澄清该值没有反映在html中，而是在选中时返回。谢谢！这正好回答了我的问题。我想这说明了它一直都在正常工作，我只是对在浏览器（HTML）中看到的结果感到困惑。如果你看一下你的JSFIDLE示例，为什么你的下拉列表最初有一个空的列表项？你如何去掉它？（在您选择某项后，它将消失）之所以发生这种情况，是因为$scope.selected被设置为“”（空），但项数组中没有具有此值的id的项。若要修复，请将$scope.selected初始化为有效项，如“023”。

<html data-ng-app="app">
  <body data-ng-controller="MainCtrl">
    <form>
    <select data-ng-model="showItems" data-ng-options="item as item.name for item in items"></select>
    </form>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

<select data-ng-model="selectedItem" ng-options="item as item.name for item in items" class="ng-pristine ng-valid">
    <option value="?" selected="selected"></option>
    <option value="0">foo</option>
    <option value="1">bar</option>
    <option value="2">blah</option>
</select>

<select data-ng-model="selectedItem" ng-options="item as item.name for item in items" class="ng-pristine ng-valid">
    <option value="?" selected="selected"></option>
    <option value="023">foo</option>
    <option value="033">bar</option>
    <option value="010">blah</option>
</select>

<select ng-model="selected">
    <option value="{{item.id}}" ng-repeat="(i,item) in items"> {{item.name}}
    </option>
</select>

<select ng-model="selected" ng-options='item.id as item.name for item in items'>               </select>