Ang-JS中的Angular JS绑定范围数据形成

时间:2013-11-09 21:18:58

标签: angularjs ng-repeat

我在$ scope.data中有一系列项目,字段为“id”,“name”& “age”,使用ng-repeat指令在视图中显示。 对于每组项目,都有一个相应的“编辑按钮”。

我希望能够访问按下了编辑按钮的特定项目集的值。

HTML:

<div ng-controller="Ctrl">
    <div ng-repeat="i in data">
        Name: {{i.name}}
        Age: {{i.age}}

        <form ng-submit="submit()">
            <input type="text" ng-model="i.id"/>
            <input type="submit" value="Edit" />
        </form>
    </div>
</div>

脚本:

function Ctrl($scope) 
{
  $scope.data = [
    {id:1,name:"Alex",age:22},
    {id:2,name:"Sam", age:28}
    ];

    $scope.submit = function() {
        //access id of user for which edit was clicked
    };
}

这样做的正确方法是什么?

3 个答案:

答案 0 :(得分:6)

我建议你只使用一个按钮代替表格:

<div ng-controller="Ctrl">
    <div ng-repeat="i in data">
        Name: {{i.name}}
        Age: {{i.age}}

        <input type="text" ng-model="i.id"/>
        <button ng-click="submit(i)">Edit</button>

    </div>
</div>

只需将i发送到按钮点击事件(我想如果您需要验证,可以使用表单,但您的示例似乎不需要它)。

您的submit功能随后更改为:

$scope.submit = function(selectedItem) {

    // here you now have access to selected item    
};

答案 1 :(得分:3)

试试这个:

HTML:

<form ng-submit="submit(i.id)">

JavaScript的:

$scope.submit = function(userId) {
  // you have userId
};

答案 2 :(得分:2)

一种方法是在ng-click

中调用提交内容的按钮中使用i
<div ng-controller="Ctrl">
    <div ng-repeat="i in data">
        Name: {{i.name}}
        Age: {{i.age}}

        <button ng-click="submit(i);">edit</button>

    </div>
</div>

和功能:

$scope.submit = function(i) {
    console.log(i);
    //access id of user for which edit was clicked
};

这是一个工作的小提琴:http://jsfiddle.net/pRAcP/