<!DOCTYPE html>
<html ng-app="myApps">
<head>
<title>Welcome to AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<script>
var myApp = angular.module('myApps', []);
myApp.controller('MyController', function ($scope) {
$scope.selection = {};
$scope.select = function(artist) {
$scope.selected = artist;
};
$scope.list = [{
name: "Beatles",
songs: ["Yellow Submarine", "Helter Skelter", "Lucy in the Sky with Diamonds"]
}, {
name: "Rolling Stones",
songs: ["Ruby Tuesday", "Satisfaction", "Jumpin Jack Flash"]
}];
/*angular.forEach($scope.list ,function(s){
services.push({songsName : s });
}); */
});
</script>
<h3>Method on controller</h3>
<div ng-controller="MyController">
<p>selected: {{selected.name}}</p>
<ul>
<li ng-repeat="artist in list">
<button ng-click="select(artist)" >{{artist.name}}</button>
<ul> <li ng-repeat="song in artist.songs">{{song}}<br/></li> </ul>
</li>
</ul>
</div>
<hr />
<h3>Setting into $parent</h3>
<div ng-controller="MyController">
<p>selected: {{selected.name}}</p>
<ul>
<li ng-repeat="artist in list">
<button ng-click="$parent.selected = artist" >{{artist.name}}</button>
<ul> <li ng-repeat="song in artist.songs">{{song}}<br/></li> </ul>
</li>
</ul>
</div>
<hr />
<h3>Container object</h3>
<div ng-controller="MyController">
<p>selected: {{selection.artist.name}}</p>
<ul>
<li ng-repeat="artist in list">
<button ng-click="selection.artist = artist" >{{artist.name}}</button>
<ul> <li ng-repeat="song in artist.songs">{{song}}<br/></li> </ul>
</li>
</ul>
</div>
<hr />
</body>
</html>
output:
<html ng-app="myApps">
<head>
<title>Welcome to AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<script>
var myApp = angular.module('myApps', []);
myApp.controller('MyController', function ($scope) {
$scope.selection = {};
$scope.select = function(artist) {
$scope.selected = artist;
};
$scope.list = [{
name: "Beatles",
songs: ["Yellow Submarine", "Helter Skelter", "Lucy in the Sky with Diamonds"]
}, {
name: "Rolling Stones",
songs: ["Ruby Tuesday", "Satisfaction", "Jumpin Jack Flash"]
}];
/*angular.forEach($scope.list ,function(s){
services.push({songsName : s });
}); */
});
</script>
<h3>Method on controller</h3>
<div ng-controller="MyController">
<p>selected: {{selected.name}}</p>
<ul>
<li ng-repeat="artist in list">
<button ng-click="select(artist)" >{{artist.name}}</button>
<ul> <li ng-repeat="song in artist.songs">{{song}}<br/></li> </ul>
</li>
</ul>
</div>
<hr />
<h3>Setting into $parent</h3>
<div ng-controller="MyController">
<p>selected: {{selected.name}}</p>
<ul>
<li ng-repeat="artist in list">
<button ng-click="$parent.selected = artist" >{{artist.name}}</button>
<ul> <li ng-repeat="song in artist.songs">{{song}}<br/></li> </ul>
</li>
</ul>
</div>
<hr />
<h3>Container object</h3>
<div ng-controller="MyController">
<p>selected: {{selection.artist.name}}</p>
<ul>
<li ng-repeat="artist in list">
<button ng-click="selection.artist = artist" >{{artist.name}}</button>
<ul> <li ng-repeat="song in artist.songs">{{song}}<br/></li> </ul>
</li>
</ul>
</div>
<hr />
</body>
</html>
output:
No comments:
Post a Comment