角度ng重复动态

时间:2017-08-22 02:35:35

标签: javascript angularjs

请参阅此plunker

在jQuery中,我可以获取 td 的文本并将其置于警报状态但是如何在Angular中创建?我应该把它变成javascript原生的吗?

这是脚本

var app = angular.module('plunker',[]);

app.controller('ctrl',function($scope){
  $scope.edit = function(){
    alert("ID = " + $scope.id + "\n NAME = " + $scope.name);
  };
  $scope.items = [
    {id:"1",name:"name 1"},
    {id:"2",name:"name 2"},
    {id:"3",name:"name 3"}
   ];
});

HTML

  <body ng-controller="ctrl" ng-app="plunker">
    <table>
      <thead>
        <tr>
          <th>id</th>
          <th>name</th>
          <th>edit</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="x in items">
          <td ng-model="x.id">{{x.id}}</td>
          <td>{{x.name}}</td>
          <td><button ng-click="edit()">edit</button></td>
        </tr>
      </tbody>
    </table>
  </body>

P.S

ng-repeat是动态的,我怎样才能得到它的值?

3 个答案:

答案 0 :(得分:2)

只需将值作为参数

传递给编辑功能
let range = {
  from: 0,
  to: 5
};

range[Symbol.iterator] = function() {
  return {
    next : () => {
      if (this.from <= this.to) {
        return { done: false, value: this.from++ };
      } else {
        return { done: true };
      }
    }
  };
};

for (let num of range) {
  console.log(num);
}

然后功能就是,

 <td><button ng-click="edit(x)">edit</button></td>

<强>样本

$scope.edit = function(x){
  console.log("Id is",x.id);
}
var app = angular.module('plunker',[]);

app.controller('ctrl',function($scope){
  $scope.edit = function(){
    alert("ID = " + $scope.id + "\n NAME = " + $scope.name);
  };
  $scope.items = [
    {id:"1",name:"name 1"},
    {id:"2",name:"name 2"},
    {id:"3",name:"name 3"}
   ];
   
  $scope.edit = function(x){
   console.log("$$Id is",x.id);
  }
});

答案 1 :(得分:1)

让你的函数edit()取一个变量然后传入:

$scope.edit = function(obj){
  alert("ID = " + obj.id + "\n NAME = " + obj.name);
};

然后:

<td><button ng-click="edit(x)">edit</button></td>

答案 2 :(得分:0)

您可以在控制器中创建一个大小为items.length的数组$ scope.itemModel,并使用$ scope.itemModel [$ index]上的$ index在标记中设置模型,然后通过将$ index传递给处理程序来访问该项目来自你的控制器。