在AngularJS中创建绑定字段别名

时间:2014-06-04 22:44:17

标签: angularjs

我有一个javascript对象,我试图使用模板显示和编辑属性。这是一个简单的例子:

    <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>

我要做的是传递我要在data变量中渲染的部分。我知道ng-repeat指令在这里可以做我想做的事,但我认为我做错了。必须有一种更简单的方法来实现相同的目标

我在这里尝试实现的另一件事是进行字段绑定,这样如果是<input ng-model="data" />,则实际字段被修改

编辑:对于那些感兴趣的人,这个解决方案有效,并提供双向绑定:

<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>

1 个答案:

答案 0 :(得分:1)

你不需要写一个指令。 ng-repeat“有效”,因为它创建了一个新的$ 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>

控制器:

function ctrl(){}
  

我在这里努力实现的另一件事是制作字段外滩,所以   如果那是一个,实际的领域是   改性

不确定我明白你的意思。