在更新angularjs中使用ng-option

Question

我正在创建一个使用c＃和angularjs的Web应用程序。 在我的下拉列表的更新语法中，我使用了ng-option（ as recommended by some people ）。

这是我的下拉列表：

<select ng-option="comnamelistfun as comnamelistfun.comname for comname in comnamelistfun track by comnamelistfun.comname" ng-model="ucomname"></select>

这是我调用数据的js：

 //comnamebyid
            $http.get('/csuv5.asmx/getcompanyname', {
                params: {
                    log: log,
                    pm: pm,
                    id: $scope.updateparam.Id
                }
            })

            .then(function (response) {
                {
                    $scope.comnamelistfun = response.data.cdetails;
                    $scope.ucomname = $scope.comnamelistfun[0];
                    console.log($scope.ucomname);
                }
            });

我知道我的代码有问题，有人可以帮助我吗？

Answer 1

您没有正确地在comnamelistfun上进行迭代尝试一下-

<select ng-option="c as c.comname for c in comnamelistfun track by c.comname" ng-model="ucomname"></select>

Answer 2

我为此制造了一个小提琴。 希望这会帮助你。 由于我对您的数据结构一无所知，因此我根据自己的意愿放置了一些虚拟数据。

<div ng-app="myApp">
    <div ng-controller="AppCtrl">
        <span>Default Otions:</span>
        <select ng-model="mail_notification" ng-options="c as c.value for c in mail_notifications"></select>
        <br />

        <br />                
    </div>
</div>

js文件

  var app = angular.module('myApp', []);
    app.controller('AppCtrl', function($scope){
        $scope.mail_notifications = [
            {
                "value": "For any event on all my projects"
            },
            {
                "value": "For any event on the selected projects only..."
            },
            {
                "value": "Only for things I watch or I'm involved in"
            },
            {
                "value": "Only for things I am assigned to"
            },
            {
                "value": "Only for things I am the owner of"
            },
            {
                "value": "No events"
            }
        ];
    });

https://jsfiddle.net/mvs2809/bjs3g/110/

Answer 3

检查此示例，它显示了comname属性，并将包含comname的' object ' comname为ng-model指令中指定的属性。

 angular .module('demo', []) .controller('DefaultController', DefaultController); function DefaultController() { var vm = this; vm.data = { "cdetails": [{ "comname": "QED Productions Pvt Ltd" }, { "comname": "A-1 Heights \& Hospitality Private Limited" }, { "comname": "Absolute Hospitality Services" }, { "comname": "Air India Ltd" }, { "comname": "Amara Raja Industrial Service Pvt. Ltd" }, { "comname": "ANS International" }, { "comname": "Atmosphere Hotels and Resorts" }, { "comname": "Azure Hospitality Pvt Ltd" }, { "comname": "Bajaj Finance Limited" }, { "comname": "Bauer India Ltd" }, { "comname": "Cafe Zoe" }, { "comname": "Care Facility Management Services" }, { "comname": "Zodiac Clothing Co Ltd" }] } } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="demo"> <div ng-controller="DefaultController as ctrl"> <select ng-model="ctrl.selectedItem" ng-options="item as item.comname for item in ctrl.data.cdetails"> <option value="">Select</option> </select> </div> </div> 

如果要向用户显示comname属性并将comname属性值设置为ng-model指令绑定的变量（即，出于检索目的），则无需使用track by子句

 angular .module('demo', []) .controller('DefaultController', DefaultController); function DefaultController() { var vm = this; vm.selectedItem = "Air India Ltd"; vm.data = { "cdetails": [{ "comname": "QED Productions Pvt Ltd" }, { "comname": "A-1 Heights \& Hospitality Private Limited" }, { "comname": "Absolute Hospitality Services" }, { "comname": "Air India Ltd" }, { "comname": "Amara Raja Industrial Service Pvt. Ltd" }, { "comname": "ANS International" }, { "comname": "Atmosphere Hotels and Resorts" }, { "comname": "Azure Hospitality Pvt Ltd" }, { "comname": "Bajaj Finance Limited" }, { "comname": "Bauer India Ltd" }, { "comname": "Cafe Zoe" }, { "comname": "Care Facility Management Services" }, { "comname": "Zodiac Clothing Co Ltd" }] } } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="demo"> <div ng-controller="DefaultController as ctrl"> <select ng-model="ctrl.selectedItem" ng-options="item.comname as item.comname for item in ctrl.data.cdetails"> <option value="">Select</option> </select> </div> </div> 

Answer 4

看来您获取的数据是JSON。 您需要先解析它，然后再使用它。 尝试这个：

 $scope.comnamelistfun = JSON.parse(response.data.cdetails);