Ng-options 未填充

Question

所以我有一个从 PHP 页面返回的 JSON 对象。它包含带有 ID、名称和号码的帐户。我可以将它们全部重复到页面上，但是当我使用 ng-option 时，它似乎不起作用。

这个有效：

<p ng-repeat="account in accounts">
     ID: {{account.id}}<br>
     Name: {{account.name}}<br>
     Number: {{account.phone}}
</p>

但这不是：

<select class="form-control input-sm" id="accountSelect" 
     ng-model="option.account" 
     ng-options="account.id as account.name for account in accounts">
</select>

这是我设置的地方 option.account:

$scope.option={
    account: $scope.accounts[0].id
};

这是我的控制器代码，编辑了一些内容以仅关注问题区域。

app.controller('CheckCallsCtrl', ['$scope', '$http', function($scope, $http){

getAccountTickets(1940713);

function getAccountTickets(callerID){

        $scope.searchTicket="";

        var request = $http({
            method: "post",
            url: "scripts/getTickets.php",
            data: {
                phone : callerID
            },
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        });

        request.success(function(data){

            $scope.accounts = data.Account.Account;

            $scope.option={
                account: $scope.accounts[0].id
            };

            console.log($scope.option.account);

            $scope.noTickets = false;
            $scope.ticketData = data;

            $scope.openTickets = $scope.ticketData.open;

            $scope.last30 = $scope.ticketData.last30;

            $scope.openAlerts = $scope.ticketData.openAlerts;

            $scope.last30Alerts = $scope.ticketData.last30Alerts;
        });

        request.error(function(data){
            console.log(data);
        });

    }

}]);

问题是否存在，因为我在页面加载后从 $http 请求中获取数据？

Answer 1

您确定要设置 $scope.option 帐户填充时间吗？

angular.module('MyApp', []).
controller('MyController', ['$q','$scope',
  function($q,$scope) {
    var deferred = $q.defer()
    setTimeout(function(){
      deferred.resolve([{id:0,name:'zero',phone:'555-555-5555'},
                     {id:1,name:'one',phone:'555-555-5555'},
                     {id:2,name:'two',phone:'555-555-5555'},
                     {id:3,name:'three',phone:'555-555-5555'}]);
      },1000);
    
    deferred.promise.then(function(data){ 
      $scope.accounts = data;
      $scope.option = {
        account: $scope.accounts[0].id
      };
   });
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MyController">
  <p ng-repeat="account in accounts">
    ID: {{account.id}}
    <br>Name: {{account.name}}
    <br>Number: {{account.phone}}
  </p>
  <pre>{{option.account}}</pre>
  <select class="form-control input-sm" id="accountSelect" ng-model="option.account" ng-options="account.id as account.name for account in accounts">
  </select>


</div>

Answer 2

请检查此 demo。查看您是否缺少右括号或控制器脚本的一部分。

HTML

<div ng-app="myApp" ng-controller="myCtrl">
    <select class="form-control input-sm" id="accountSelect" 
         ng-model="option.account" 
         ng-options="account.id as account.name for account in accounts">
    </select>
</div>

脚本

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.accounts = [ {id:1,name:'test1', phone:'1234567890'},
                    {id:2,name:'test2', phone:'1234567890'},
                    {id:3,name:'test3', phone:'1234567890'}
                  ];

$scope.option={
                  account: $scope.accounts[0].id
              }
});

Answer 3

在你的情况下，尝试将你的控制器变量名称添加到你的帐户变量中。

<select ... ng-options="ccount.id as account.name for account in CONTROLLER.accounts">

Ng-options 未填充

Ng-options not populating

angularjs

ng-options