Search This Blog

2016-01-11

Angular JS Tutorial2: ng-init,ng-repeat,sharedscope

The ng-init directive initializes application data.

The ngRepeat directive instantiates a template once per item from a collection.

In order to share data between scopes by model, use the model property like samplemode.sampledata

Example :

<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
 <title>ng-init,ng-repeat,sharedscope</title>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

</head>
<body>
 <div ng-init="menu='chicken';
 places=[
 {country:'UK',city:'Southampton'},
 {country:'Europe',city:'Paris'},
 {country:'India',city:'Kolkata'},
 ]">
  <input type="text" ng-model="menu"/>
 </div>
<br/>
Share the data between this textbox and textboxes inside the country:city loop use the property like 'message.sharescope'<br/>
Otherwise it will be unidirectional binding from outer ti inner loop, when you use only 'message'<br/>
<input type="text" ng-model="message.sharescope"/><!--to share data between scope, use the property like 'message.sharescope' inplace of 'message', else innser scope value will not be passed to outer scope-->
<p ng-repeat="place in places">
 {{place.country}} :{{place.city}}
 <input type="text" ng-model="message.sharescope">
 <br/>
</p>
</body>
</html>


Output


No comments: