角ng重复动态 [英] Angular ng-repeat dynamic

查看:48
本文介绍了角ng重复动态的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

请参见朋克车

在jQuery中,我可以获取其 td 的文本并将其置于警报中,但是如何在Angular中进行显示呢?我应该将其设为javascript原生语言吗?

In jQuery I can get the text of its td and put it in an alert but how can I make it in Angular? Should I make it an javascript native?

这是脚本

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>

PS

ng-repeat是动态的,那么我如何获得它的价值?

The ng-repeat is dynamic so how can I get the value of it?

推荐答案

只需将值作为参数传递给edit函数,

Just pass the value to the edit function as parameter,

 <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);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<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(x)">edit</button></td>
        </tr>
      </tbody>
    </table>
  </body>

这篇关于角ng重复动态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆