javascript - ng-options loop through an array of objects within an object?

admin管理员组
文章数量:1023758

I have this object format

{
      first_name : "Bob",
      last_name : "Smith",
      addresses : [
        {address:"1 Baker Street",
          city: "london"
        },
        {address:"2 Baker Street",
          city: "london"
        }
        ]
    }

I want to set the address bits in the select dropdown i.e. "1 Baker Street", "2 Baker Street",

This is my code

<!DOCTYPE html>
<html>
<script src=".4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedAddress" ng-options="item for item in testObject">
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.testObject =     {
          first_name : "Bob",
          last_name : "Smith",
          addresses : [
            {address:"1 Baker Street",
              city: "london"
            },
            {address:"2 Baker Street",
              city: "london"
            }
            ]
        }
});
</script>

</body>
</html>

I'm struggling to get my head around how to loop through the objects with AngularJS. Any help?

I have this object format

{
      first_name : "Bob",
      last_name : "Smith",
      addresses : [
        {address:"1 Baker Street",
          city: "london"
        },
        {address:"2 Baker Street",
          city: "london"
        }
        ]
    }

I want to set the address bits in the select dropdown i.e. "1 Baker Street", "2 Baker Street",

This is my code

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedAddress" ng-options="item for item in testObject">
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.testObject =     {
          first_name : "Bob",
          last_name : "Smith",
          addresses : [
            {address:"1 Baker Street",
              city: "london"
            },
            {address:"2 Baker Street",
              city: "london"
            }
            ]
        }
});
</script>

</body>
</html>

I'm struggling to get my head around how to loop through the objects with AngularJS. Any help?

Share Improve this question asked Apr 12, 2017 at 13:07 Adz 2,84712 gold badges45 silver badges62 bronze badges

your missing the testObject.addresses on html binding – LiverpoolOwen Commented Apr 12, 2017 at 13:10

Add a ment |

2 Answers 2

Sorted by: Reset to default 5

You have to call the child object of array and the property. Take a look this code.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.testObject =     {
          first_name : "Bob",
          last_name : "Smith",
          addresses : [
            {address:"1 Baker Street",
              city: "london"
            },
            {address:"2 Baker Street",
              city: "london"
            }
            ]
        }
});

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedAddress" ng-options="item.address for item in testObject.addresses">
</select>

</div>

Check this one:

 <select ng-model="selectedItem" 
         ng-options="selectedItem as selectedItem.address       
                     for selectedItem in testObject.addresses">  
</select>

You can also set default selectedItem as 1st item in list

$scope.selectedItem = $scope.testObject.addresses[0];

Demo

I have this object format

{
      first_name : "Bob",
      last_name : "Smith",
      addresses : [
        {address:"1 Baker Street",
          city: "london"
        },
        {address:"2 Baker Street",
          city: "london"
        }
        ]
    }

I want to set the address bits in the select dropdown i.e. "1 Baker Street", "2 Baker Street",

This is my code

<!DOCTYPE html>
<html>
<script src=".4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedAddress" ng-options="item for item in testObject">
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.testObject =     {
          first_name : "Bob",
          last_name : "Smith",
          addresses : [
            {address:"1 Baker Street",
              city: "london"
            },
            {address:"2 Baker Street",
              city: "london"
            }
            ]
        }
});
</script>

</body>
</html>

I'm struggling to get my head around how to loop through the objects with AngularJS. Any help?

I have this object format

{
      first_name : "Bob",
      last_name : "Smith",
      addresses : [
        {address:"1 Baker Street",
          city: "london"
        },
        {address:"2 Baker Street",
          city: "london"
        }
        ]
    }

I want to set the address bits in the select dropdown i.e. "1 Baker Street", "2 Baker Street",

This is my code

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedAddress" ng-options="item for item in testObject">
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.testObject =     {
          first_name : "Bob",
          last_name : "Smith",
          addresses : [
            {address:"1 Baker Street",
              city: "london"
            },
            {address:"2 Baker Street",
              city: "london"
            }
            ]
        }
});
</script>

</body>
</html>

I'm struggling to get my head around how to loop through the objects with AngularJS. Any help?

Share Improve this question asked Apr 12, 2017 at 13:07 Adz 2,84712 gold badges45 silver badges62 bronze badges

your missing the testObject.addresses on html binding – LiverpoolOwen Commented Apr 12, 2017 at 13:10

Add a ment |

2 Answers 2

Sorted by: Reset to default 5

You have to call the child object of array and the property. Take a look this code.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.testObject =     {
          first_name : "Bob",
          last_name : "Smith",
          addresses : [
            {address:"1 Baker Street",
              city: "london"
            },
            {address:"2 Baker Street",
              city: "london"
            }
            ]
        }
});

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedAddress" ng-options="item.address for item in testObject.addresses">
</select>

</div>

Check this one:

 <select ng-model="selectedItem" 
         ng-options="selectedItem as selectedItem.address       
                     for selectedItem in testObject.addresses">  
</select>

You can also set default selectedItem as 1st item in list

$scope.selectedItem = $scope.testObject.addresses[0];

Demo

本文标签： javascriptngoptions loop through an array of objects within an objectStack Overflow

版权声明：本文标题：javascript - ng-options loop through an array of objects within an object? - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://it.en369.cn/questions/1745534072a2154881.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

369IT编程

javascript - ng-options loop through an array of objects within an object? - Stack Overflow

2 Answers 2

2 Answers 2

更多相关文章