I have a javascript object, properties of which I am trying to display and edit using templates. Here's a simple illustration:
<div ng-init="friends = [
{name:'John', age:25, gender:'boy'},
{name:'Jessie', age:30, gender:'girl'},
{name:'Johanna', age:28, gender:'girl'},
{name:'Joy', age:15, gender:'girl'},
{name:'Mary', age:28, gender:'girl'},
{name:'Peter', age:95, gender:'boy'},
{name:'Sebastian', age:50, gender:'boy'},
{name:'Erika', age:27, gender:'girl'},
{name:'Patrick', age:40, gender:'boy'},
{name:'Samantha', age:60, gender:'girl'}
]" />
<script type="text/ng-template" id="render">
<span>{{data}}</span>
</script>
<script type="text/ng-template" id="render">
<span title="some fancy renderer">{{data}}</span>
</script>
<p ng-repeat="friend in friends">
<span ng-repeat="data in [friend.name]" ng-include="'render'"></span>,
<span ng-repeat="data in [friend.age]" ng-include="'render'"></span>
<span ng-repeat="data in [friend.gender]" ng-include="'render'"></span>
</p>
What I am trying to do is pass the piece I want to render inside data variable. I know ng-repeat directive works here to do what I want, but I think I am doing it wrong. There's got to be a simpler way to achieve the same goal
Another thing I am trying to achieve here is to make field bind, so that if that was an <input ng-model="data" />, actual field was modified
EDIT: For those of you who are interested, this solution worked, and provided 2-way bind as well:
<script type="text/ng-template" id="render">
<input ng-model="d.o[d.f]" />
</script>
<p ng-repeat="friend in friends">
<span ng-controller="ctrl" ng-init="d={o:friend, f:'name'}" ng-include="'render'">
</span>
<span ng-controller="ctrl" ng-init="d={o:friend, f:'age'}" ng-include="'render'">
</span>
<span ng-controller="ctrl" ng-init="d={o:friend, f:'gender'}" ng-include="'render'">
</span>
</p>
Nope you need to write a directive. ng-repeat "works" because it created a new $scope. Or you can create an empty controller that will create a scope
<p ng-repeat="friend in friends">
<span ng-controller="ctrl" onload="data =friend.name" ng-include="'render'"></span>,
<span ng-controller="ctrl" onload="data =friend.age" ng-include="'render'"></span>
<span ng-controller="ctrl" onload="data =friend.gender" ng-include="'render'"></span>
</p>
controller :
function ctrl(){}
Another thing I am treying to achieve here is to make field bund, so that if that was an , actual field was modified
Not sure i understand what you mean here.