ng:dependency-sortig

Display data according to selected options

by Krzysztof Safjanowski

HTML

<section ng-app ng-controller="Controller">
	<h2 class="page-title">Model</h2>
    <div class="row-fluid">
        <div class="span4">
            <label for="cboGroup">Group</label>
				<select data-ng-model="currentGroup" data-ng-options="group as group.Name for group in groups"></select>
        </div>
        <div class="span4">
            <label for="cboItem">Items</label>
				<select data-ng-model="currentItem" data-ng-options="item as item.Name for item in currentGroup.Items"></select>
        </div>
        <div class="well">
                what I am trying to archive is that the items are changing each time the group changes.
        </div>
        <div>
            Group : {{currentGroup | json}}
        </div>
        <div>
            Item : {{currentItem | json}}
        </div>
    </div>
</section>

JavaScript

function Controller( $scope ) {
    
	var groups = [{
		"Id": "1",
		"Name": "Group 1",
		"Items": [
			 {
			 	"Id": "1",
			 	"Name": "Item 1"
			 },
			 {
			 	"Id": "2",
			 	"Name": "Item 2"
			 },
			 {
			 	"Id": "3",
			 	"Name": "Item 3"
			 },
			 {
			 	"Id": "4",
			 	"Name": "Item 4"
			 }]}
		,
			{"Id": "2",
				"Name": "Group 2",
				"Items": [
					 {
					 	"Id": "5",
					 	"Name": "Item 5"
					 },
					 {
					 	"Id": "6",
					 	"Name": "Item 6"
					 },
					 {
					 	"Id": "7",
					 	"Name": "Item 7"
					 },
					 {
					 	"Id": "8",
					 	"Name": "Item 8"
					 }
				]
			}
	];
        
	$scope.groups = groups;
	$scope.currentGroup = groups[0];
    $scope.$watch('currentGroup', function(value, oldValue){
       $scope.currentItem = value.Items[0];
    });
}