javascript - ng-repeat 中的 AngularJS ng-option

标签 javascript angularjs

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

我有 ng-repeat,它可以迭代模型视频。

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

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

这是视频模型:

$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"}
            ];

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

目前下拉列表是空的。

我怎样才能做到这一点?

This is the expected result, currently i'm getting the dropdown boxes empty

最佳答案

您只需要使用 item.id as item.name for item in videoList 为 ng-options 设置一个值.请参阅下面的代码。

(我将 id 设置为值,因为我认为它更适合。在某个地方你还需要根据 id 更新你的 name 属性。或者副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"}
  ];
});
<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>

关于javascript - ng-repeat 中的 AngularJS ng-option,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27922829/

相关文章:

javascript - 在局部 View 上设置拖放区的正确方法是什么?

javascript - 如何在javascript中获取给定类型的所有对象

javascript - React-native Android Emulator 需要开启debugger模式

javascript - 使用 ui-router 如何使用自己保留的路由创建两个不同状态的嵌套实例?

javascript - 选项卡内容与其他选项卡内容重叠

java - POST 响应 HTML 页面显示在调试器中,但未显示在使用 JAVAEE 的浏览器中

javascript - 使用Ajax从javascript发送数组到php,不使用表单

java - 动态打印表格行

javascript - AngularJS V1.1 拦截器总是在末尾有 $q.when

javascript - 使用没有任何 token 进行用户身份验证的快速 session 是否安全?