1

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

2 に答える 2

1

data-ng-options を使用せずに、いつでも html のオプションを繰り返すことができます。私はあなたが望むことをするフィドルを作りました: http://jsfiddle.net/5MQ9L/

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

このようにして、スコープ付きの値を使用して値を直接設定できます。

これが役に立ったことを願っています！

于 2014-01-28T07:31:28.653 に答える
0

item.id を指定する必要があります

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

http://docs.angularjs.org/api/ng/directive/selectから

注: ngOptions は、選択モデルを文字列以外の値にバインドする場合に ngRepeat の代わりに使用する必要がある要素のイテレータ機能を提供します。これは、現在、オプション要素は文字列値にのみバインドできるためです。

jsFiddle http://jsfiddle.net/5MQ9L/1/を更新しました

于 2014-03-28T17:26:17.403 に答える