javascript - 使用 ng-options Angular js 过滤 json 对象

标签 javascript json angularjs ng-options

我在使用 AngularJS 将 json 对象过滤到选择表单元素中时遇到问题。这是我到目前为止所得到的。我很困惑,任何帮助将不胜感激。

app.js:

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

app.controller('MainCtrl', function($scope) {
  $scope.showItems = null;
  $scope.items = [
    { id: '023', name: 'foo' },
    { id: '033', name: 'bar' },
    { id: '010', name: 'blah' }];
});

singlepageapp.html:

<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>

最佳答案

您始终可以重复 html 中的选项,而不使用 data-ng-options。我做了一个 fiddle ,可以满足你的要求:http://jsfiddle.net/5MQ9L/

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

这样您就可以直接使用作用域值设置值。

希望这有帮助!

关于javascript - 使用 ng-options Angular js 过滤 json 对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21397491/

相关文章:

javascript - 如何在 Cloud Functions for Firebase 中实现 json 对象?

javascript - 如何在 jQuery UI Datepicker 中禁用下一个周末?

javascript:一次性将大型 CSS 字符串插入到每个 DOM 元素中

javascript - 合法地避免弹出窗口阻止

java - 使用 Jackson 将 json 字符串转换为 List<List<String>

asp.net - NewtonSoft.JSON 版本 9.0.1 的问题

ios - JSONModel NSString 问题

javascript - 在 ng-model 中动态创建属性

angularjs - NgDocs Provider 怎么用呢?

javascript - AngularJS- "Duplicates in a repeater not allowed"