使用 ng-option 更新 angularjs

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

我为此创建了一个小提琴。希望这会帮助你。由于我对您的数据结构一无所知，我根据我的关注放置了一些虚拟数据。

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

你没有正确地迭代 comnamelistfun 试试这个 -

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

Answer 3

查看此示例，它显示了comname 属性并将包含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 \u0026 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 \u0026 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);