CODEWITHSUNDEEP
angularjsng-options
CaptainQuint
CaptainQuint

Reputation: 342

Ng-options not populating

So I have a JSON object returned from a PHP page. It contains accounts with their id, name, and number. I can repeat them all out onto the page, but when I use ng-option, it doesn't seem to work.

This works: 

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

But this does not:

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

This is where I set option.account:

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

Here is my Controller code, some things edited out to just focus on the problem area.

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);
        });

    }

}]);

Could the problem exist, because I get the data from an $http request after the page has already loaded?

Upvotes: 0

Views: 308

Answers (3)

amighty
amighty

Reputation: 784

Please check this demo. See if you are missing closing bracket or something as part of controller script.

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>

SCRIPT

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
              }
});

Upvotes: 1

Disfigure
Disfigure

Reputation: 740

In your case try to preppend your controller var name to your accounts var.

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

Upvotes: 0

user2033671
user2033671

Reputation:

Are you sure you are setting $scope.option when accounts are populated?

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>

Upvotes: 0

Related Questions