使用ng-option更新angularjs

本文关键字：angularjs 更新 ng-option 使用 | 更新日期: 2023-09-27 18:14:03

我正在创建一个web应用程序，我使用c#和angularjs。在我更新的下拉列表语法中，我使用了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);
                }
            });

我知道我的代码有问题，有人能帮我吗?

使用ng-option更新angularjs

我为此创建了一个小提琴。希望这对你有帮助。因为我对你的数据结构没有任何想法，我把一些虚拟数据作为我的关注。

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

你没有正确地迭代comnamelistfun

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

查看本例，显示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>

看起来您正在获得的数据是JSON。您需要在使用它之前对其进行解析。试试这个:

 $scope.comnamelistfun = JSON.parse(response.data.cdetails);
相关文章：