将动态数据加载到angularjs中的选择框选项中

发布时间：2020-12-17 07:08:15 所属栏目：安全来源：网络整理

导读：以下是我的控制器代码的一部分 restApp.getAllcomponents().then(function(data){ $scope.compList = data.components; var j=0; while(j $scope.compList.length){ $scope.allOptions = $scope.compList[j]; console.log($scope.allOptions); j++; } }); 视

以下是我的控制器代码的一部分

restApp.getAllcomponents().then(function(data){
        $scope.compList = data.components;
        var j=0;
        while(j < $scope.compList.length){
            $scope.allOptions = $scope.compList[j];
            console.log($scope.allOptions);
            j++;
        }
 });

视图

<div class="field-box">
    <label>Components:</label>
    <!--Here I need select box with dynamic generated options-->
</div>

在console.log上面打印出像

Object {id: 27,name: "loruth water point",latitude: 4.453488123,longitude: 35.36021409} adminContentAttachmentsTabCtrl.js:33
Object {id: 28,name: "kibish",latitude: 5.286289986,longitude: 35.82917452} adminContentAttachmentsTabCtrl.js:33
Object {id: 30,name: "Ekalale",latitude: 4.434588531,longitude: 35.72135923} adminContentAttachmentsTabCtrl.js:33
Object {id: 34,name: "karubangorok",latitude: 4.506236007,longitude: 35.4201746} adminContentAttachmentsTabCtrl.js:33
Object {id: 35,name: "nakitoe kakumon",latitude: 4.214576564,longitude: 35.35912495} adminContentAttachmentsTabCtrl.js:33
Object {id: 36,name: "kaikor mission",latitude: 4.516645656,longitude: 35.42262991}

所以我需要的是将响应数据加载到我的选择框中,选项值中的“id”和选项内容中的“name”.

我怎样才能做到这一点？任何帮助……

解决方法

以下是如何从列表中生成选择,我使用静态列表,只需将其替换为动态列表.

JavaScript的

angular.module('app',[]).controller('MyCtrl',function($scope) {
    $scope.list = [{
        id: 27,longitude: 35.36021409
    },{
        id: 28,longitude: 35.82917452
    },{
        id: 30,longitude: 35.72135923
    },{
        id: 34,longitude: 35.4201746
    },{
        id: 35,longitude: 35.35912495
    },{
        id: 36,longitude: 35.42262991
    }];

});

HTML

<div ng-app="app">
    <div ng-controller="MyCtrl">
         <h2>List:</h2>
        <select ng-model="selectedItem" ng-options="item.name for item in list">
            <option value="">-- choose --</option>
        </select>
         <h2>Selected:</h2>
            {{selectedItem.name}}
    </div>
</div>

DEMO
http://jsfiddle.net/U3pVM/8388/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!