ng-repeat中的AngularJS ng-option

Lia*_*nat 11 javascript angularjs

很简单的问题,但不知道如何解决它

我有重复,重复模型视频.

模型有一个选定的值,我想在下拉列表中看到它:

<div data-ng-repeat="singleVideo in model.videos">
    {{singleVideo}}<select data-ng-model="singleVideo.name" ng-options="item.name for item in videoList"></select>
</div>
Run Code Online (Sandbox Code Playgroud)

这是视频模型:

$scope.model = {
                 videos:[
                    {id:1,name:"VIDEO_ONE"},
                    {id:2,name:"VIDEO_TWO"}
                ]
            }
Run Code Online (Sandbox Code Playgroud)

这是videoList项:

$scope.videoList = [
                {id:1,name:"VIDEO_ONE"},
                {id:2,name:"VIDEO_TWO"},
                {id:3,name:"VIDEO_Three"}
            ];
Run Code Online (Sandbox Code Playgroud)

我只希望看到第一个下拉值设置为VIDEO_ONE,第二个下拉值将设置为VIDEO_TWO.

目前下拉列表是空的.

我怎样才能做到这一点?

这是预期的结果,目前我将下拉框清空

zwa*_*cky 8

您只需要为ng-options设置一个值item.id as item.name for item in videoList.见下面的代码.

(我将id设置为值,因为我觉得它更适合.在某个地方你还需要name根据id.或者ver verca 来更新你的属性.你的选择.)

angular.module('testapp', [])
.controller('appCtrl', function($scope) {
  $scope.model = {
    videos:[
      {id:1,name:"VIDEO_ONE"},
      {id:2,name:"VIDEO_TWO"}
    ]
  };
  
  $scope.videoList = [
    {id:1,name:"VIDEO_ONE"},
    {id:2,name:"VIDEO_TWO"},
    {id:3,name:"VIDEO_Three"}
  ];
});
Run Code Online (Sandbox Code Playgroud)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="testapp">
  <div ng-controller="appCtrl">
    <div ng-repeat="singleVideo in model.videos">
      {{singleVideo.name}}
      <select ng-model="singleVideo.id" ng-options="item.id as item.name for item in videoList" ng-selected="true"></select>
    </div>
  </div>
</body>
Run Code Online (Sandbox Code Playgroud)