单个JSON源

Question

我正在尝试使用某些json数据实现角度级联<select>。

基本上，只要用户选择导演，电影下拉列表就会填充导演电影。

但是我不知道如何在电影的ng-repeat中访问json中导演的一组子项目<select>

选择如下。第一个下拉列表会在加载时填充所有导演的ID和名称

<select name="directors" id="directors" ng-model="searchFilter.directorId">
    <option ng-repeat="item in directors" value="{{item.id}}">{{item.name}}</option>
</select>
<select name="movies" id="movies" ng-disabled="!searchFilter.movieId" ng-model="searchFilter.movieId">
    <option ng-repeat="item in directors.childItems" value="{{item.id}}">{{item.name}}</option>
</select>

json是

[{
        "childItems": [{
                "childItems": null,
                "id": 3,
                "name": "Star Wars"
            }
        ],
        "id": 168,
        "name": "George Lucas"
    }, {
        "childItems": [{
                "childItems": null,
                "id": 10,
                "name": "The Hobbit"
            }, {
                "childItems": null,
                "id": 11,
                "name": "The Return of the King"
            }, {
                "childItems": null,
                "id": 30,
                "name": "Fellowship of the Ring"
            }
        ],
        "id": 170,
        "name": "Peter Jackson"
    }, {
        "childItems": [{
                "childItems": null,
                "id": 3,
                "name": "Blade Runner"
            }
        ],
        "id": 167,
        "name": "Ridley Scott"
    }, {
        "childItems": [{
                "childItems": null,
                "id": 3,
                "name": "2001 A Space Odyssey"
            }
        ],
        "id": 279,
        "name": "Stanley Kubrick"
    }, {
        "childItems": [{
                "childItems": null,
                "id": 3,
                "name": "Manhattan"
            }
        ],
        "id": 169,
        "name": "Woody Allen"
    }
]

有人可以帮忙吗？

Answer 1

使用ng-options即可轻松完成。

<select name="directors" id="directors" ng-model="selectedDirector" 
        ng-options="item.name for item in movieList">

<select name="movies" id="movies" ng-disabled="!selectedDirector" ng-model="selectedMovie" 
        ng-options="item.id as item.name for item in selectedDirector.childItems">

这里我们使用selectedDirector作为辅助下拉列表中的输入对象。在辅助下拉列表中，我们使用替代表单将item.id绑定到ng-model，同时使用item.name作为标签。

＆＃13;

＆＃13;

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

app.controller('MainCtrl', function($scope) {


  $scope.movieList = [{
    "childItems": [{
      "childItems": null,
      "id": 3,
      "name": "Star Wars"
    }],
    "id": 168,
    "name": "George Lucas"
  }, {
    "childItems": [{
      "childItems": null,
      "id": 10,
      "name": "The Hobbit"
    }, {
      "childItems": null,
      "id": 11,
      "name": "The Return of the King"
    }, {
      "childItems": null,
      "id": 30,
      "name": "Fellowship of the Ring"
    }],
    "id": 170,
    "name": "Peter Jackson"
  }, {
    "childItems": [{
      "childItems": null,
      "id": 3,
      "name": "Blade Runner"
    }],
    "id": 167,
    "name": "Ridley Scott"
  }, {
    "childItems": [{
      "childItems": null,
      "id": 3,
      "name": "2001 A Space Odyssey"
    }],
    "id": 279,
    "name": "Stanley Kubrick"
  }, {
    "childItems": [{
      "childItems": null,
      "id": 3,
      "name": "Manhattan"
    }],
    "id": 169,
    "name": "Woody Allen"
  }]
});

＆＃13;

<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js" data-semver="1.5.10"></script>

<div ng-app="plunker" ng-controller="MainCtrl">

  <select name="directors" id="directors" ng-model="selectedDirector" ng-options="item.name for item in movieList">
  </select>
  <pre>{{selectedDirector}}</pre>
  <select name="movies" id="movies" ng-disabled="!selectedDirector" ng-model="selectedMovie" ng-options="item.id as item.name for item in selectedDirector.childItems">
  </select>
  <pre>{{selectedMovie}}</pre>

</div>

＆＃13;

＆＃13;

＆＃13;

http://plnkr.co/edit/qQVjhssFlFDXIzLm4LdQ?p=preview

Answer 2

最简单的方法是在searchFilter中使用整个导演对象，然后在构建电影列表时引用它

<select name="directors" id="directors" ng-model="searchFilter.director">
    <option ng-repeat="item in directors" ng-value="item">{{item.name}}</option>
</select>
<select name="movies" id="movies" ng-model="searchFilter.movieId">
    <option ng-repeat="item in searchFilter.director.childItems" value="{{item.id}}">{{item.name}}</option>
</select>