Thêm tham số vào chức năng ng-click bên trong ng-repeat dường như không hoạt động

386

Tôi có một vòng lặp đơn giản ng-repeatnhư thế này:

<li ng-repeat='task in tasks'>
  <p> {{task.name}}
  <button ng-click="removeTask({{task.id}})">remove</button>
</li>

Có một chức năng trong bộ điều khiển $scope.removeTask(taskID).

Theo như tôi biết thì Angular trước tiên sẽ hiển thị chế độ xem và thay thế nội suy {{task.id}}bằng một số, và sau đó, khi nhấp vào sự kiện, sẽ đánh giá ng-clickchuỗi.

Trong trường hợp này ng-clicknhận được hoàn toàn những gì được mong đợi, tức là: ng-click="removeTask(5)".Tuy nhiên ... nó không làm gì cả.

Tất nhiên tôi có thể viết mã để lấy task.idtừ $tasksmảng hoặc thậm chí DOM, nhưng điều này có vẻ không giống như cách Angular.

Vì vậy, làm thế nào người ta có thể thêm nội dung động vào ng-clickchỉ thị bên trong một ng-repeatvòng lặp?

angularjs ng-repeat angularjs-ng-click

— Paweł Szymański
nguồn

742

Thay vì

<button ng-click="removeTask({{task.id}})">remove</button>

làm cái này:

<button ng-click="removeTask(task.id)">remove</button>

Xin vui lòng xem fiddle này:

http://jsfiddle.net/JSWorld/Hp4W7 432 /

— Cậu bé mũm mĩm
nguồn

1

+1: điều này cũng hoạt động nếu ng-clickbiểu thức của bạn không sử dụng dấu ngoặc, tức làng-click="taskData.currentTaskId = task.id"

— Andrew

Cảm ơn ngài..tôi đã xem rất nhiều blog nhưng vấn đề của tôi được giải quyết bằng giải pháp của bạn.

— Chirag Suthar

52

Một điều thực sự làm tôi khó chịu, là khi tôi kiểm tra html này trong trình duyệt, thay vì thấy nó được mở rộng thành một cái gì đó như:

<button ng-click="removeTask(1234)">remove</button>

Tôi đã thấy:

<button ng-click="removeTask(task.id)">remove</button>

Tuy nhiên, sau này hoạt động!

Điều này là do bạn đang ở trong "Thế giới góc cạnh", khi bên trong ng-click = "" Angular tất cả đã sẵn sàng biết về task.id như bạn đang ở trong mô hình của nó. Không cần sử dụng ràng buộc dữ liệu, như trong {{}}.

Hơn nữa, nếu bạn muốn vượt qua chính đối tượng tác vụ, bạn có thể thích:

<button ng-click="removeTask(task)">remove</button>

— rượu thứ sáu
nguồn

Làm thế nào điều này sẽ làm việc nếu phương pháp của bạn đang tìm kiếm một chuỗi?

1

@Dinerdo nó sẽ không. để thực hiện "removeTask (tác vụ)", bạn sẽ phải thay đổi phương thức để mong nhận được một đối tượng tác vụ và nhận thuộc tính id từ đối tượng đó.

— Jim Reineri

9

Cũng đáng chú ý, đối với những người tìm thấy điều này trong các tìm kiếm của họ, thì đây là ...

<div ng-repeat="button in buttons" class="bb-button" ng-click="goTo(button.path)">
  <div class="bb-button-label">{{ button.label }}</div>
  <div class="bb-button-description">{{ button.description }}</div>
</div>

Lưu ý giá trị của ng-click. Tham số được truyền tới goTo()là một chuỗi từ một thuộc tính của đối tượng liên kết (the button), nhưng nó không được gói trong dấu ngoặc kép. Có vẻ như AngularJS xử lý việc đó cho chúng tôi. Tôi đã gác máy trong vài phút.

— kevin628
nguồn

3

những công việc này. cảm ơn. Tôi đang tiêm html tùy chỉnh và biên dịch nó bằng cách sử dụng góc trong bộ điều khiển.

        var tableContent= '<div>Search: <input ng-model="searchText"></div>' 
                            +'<div class="table-heading">'
                            +    '<div class="table-col">Customer ID</div>'
                           + ' <div class="table-col" ng-click="vm.openDialog(c.CustomerId)">{{c.CustomerId}}</div>';

            $timeout(function () {
            var linkingFunction = $compile(tableContent);
            var elem = linkingFunction($scope);

            // You can then use the DOM element like normal.
            jQuery(tablePanel).append(elem);

            console.log("timeout");
        },100);

— srisanju
nguồn

1

Trên câu trả lời là tuyệt vời. Bạn có thể xem ví dụ mã đầy đủ sau đây để bạn có thể biết chính xác cách sử dụng

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

  	app.controller('usersCtrl', function($scope, $http) {
  	  $http.get("https://jsonplaceholder.typicode.com/users").then(function (response) {
  	  	  console.log(response.data)

  	      $scope.users = response.data;
          $scope.setKey = function (userId){
              alert(userId)
              if(localStorage){
                localStorage.setItem("userId", userId)
              } else {
                alert("No support of localStorage")
                return
              }
          }//function closed  
  	  });
  	});

    		#header{
    			color: green;
    			font-weight: bold;
    		}

  <!DOCTYPE html>
  <html>
  <head>
    <title>HyperCrud</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  </head>
  <body>
   	<!-- NAVBAR STARTS -->
      <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">HyperCrud</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="/">Home</a></li>
              <li><a href="/about/">About</a></li>
              <li><a href="/contact/">Contact</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Apps<span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="/qAlarm/details/">qAlarm &raquo;</a></li>
                  <li><a href="/YtEdit/details/">YtEdit &raquo;</a></li>
                  <li><a href="/GWeather/details/">GWeather &raquo;</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="/WadStore/details/">WadStore &raquo;</a></li>
                  <li><a href="/chatsAll/details/">chatsAll</a></li>
                </ul>
              </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="/login/">Login</a></li>
              <li><a href="/register/">Register</a></li>
              <li><a href="/services/">Services<span class="sr-only">(current)</span></a></li>
            </ul>
          </div>
        </div>
      </nav>
      <!--NAVBAR ENDS-->
  <br>
  <br>

  <div ng-app="hyperCrudApp" ng-controller="usersCtrl" class="container">
  		<div class="row">
  			<div class="col-sm-12 col-md-12">
  				<center>
  						<h1 id="header"> Users </h1>
  				</center>
  			</div>
  		</div>

  		<div class="row" >
        <!--ITERATING USERS LIST-->
  		  <div class="col-sm-6 col-md-4" ng-repeat="user in users">
  		    <div class="thumbnail">
  		      <center>
  		      	<img src="https://cdn2.iconfinder.com/data/icons/users-2/512/User_1-512.png" alt="Image - {{user.name}}" class="img-responsive img-circle" style="width: 100px">
  		      	<hr>
  		      </center>
  		      <div class="caption">
  		      	<center>
  			        <h3>{{user.name}}</h3>
  			        <p>{{user.email}}</p>
  			        <p>+91 {{user.phone}}</p>
  			        <p>{{user.address.city}}</p>
  			       </center>
  		      </div>
            <div class="caption">
                <a href="/users/delete/{{user.id}}/" role="button" class="btn btn-danger btn-block" ng-click="setKey(user.id)">DELETE</a>
                <a href="/users/update/{{user.id}}/" role="button" class="btn btn-success btn-block" ng-click="setKey(user.id)">UPDATE</a>
            </div>
  		    </div>
  		  </div>

        <div class="col-sm-6 col-md-4">
          <div class="thumbnail">
            <a href="/regiser/">
             <img src="http://img.bhs4.com/b7/b/b7b76402439268b532e3429b3f1d1db0b28651d5_large.jpg" alt="Register Image" class="img-responsive img-circle" style="width: 100%">
            </a>
          </div>
        </div>
  		</div>
      <!--ROW ENDS-->
  </div>


  </body>
  </html>

Mở rộng đoạn trích

— hygull
nguồn

0

HTML:

<div  ng-repeat="scannedDevice in ScanResult">
        <!--GridStarts-->
          <div >
              <img ng-src={{'./assets/img/PlaceHolder/Test.png'}} 
                   <!--Pass Param-->
                   ng-click="connectDevice(scannedDevice.id)"
                   altSrc="{{'./assets/img/PlaceHolder/user_place_holder.png'}}" 
                   onerror="this.src = $(this).attr('altSrc')">
           </div>    
 </div>

Tập lệnh Java:

   //Global Variables
    var  ANGULAR_APP = angular.module('TestApp',[]);

    ANGULAR_APP .controller('TestCtrl',['$scope', function($scope) {

      //Variables
      $scope.ScanResult = [];

      //Pass Parameter
      $scope.connectDevice = function(deviceID) {
            alert("Connecting : "+deviceID );
        };
     }]);

— Hitesh Sahu
nguồn

0

Đây là lần lặp lại với chức năng nhấp chuột và để nối với thanh trượt

<script>
var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope) {
        $scope.employees = [
            { 'id': '001', 'name': 'Alpha', 'joinDate': '05/17/2015', 'age': 37 },
            { 'id': '002', 'name': 'Bravo', 'joinDate': '03/25/2016', 'age': 27 },
            { 'id': '003', 'name': 'Charlie', 'joinDate': '09/11/2015', 'age': 29 },
            { 'id': '004', 'name': 'Delta', 'joinDate': '09/11/2015', 'age': 19 },
            { 'id': '005', 'name': 'Echo', 'joinDate': '03/09/2014', 'age': 32 }
        ]

            //This will hide the DIV by default.
                $scope.IsVisible = false;
            $scope.ShowHide = function () {
                //If DIV is visible it will be hidden and vice versa.
                $scope.IsVisible = $scope.IsVisible ? false : true;
            }
        });
</script>
</head>

<body>

<div class="container" ng-app="MyApp" ng-controller="MyController">
<input type="checkbox" value="checkbox1" ng-click="ShowHide()" /> checkbox1
<div id="mixedSlider">
                    <div class="MS-content">
                        <div class="item"  ng-repeat="emps in employees"  ng-show = "IsVisible">
                          <div class="subitem">
        <p>{{emps.id}}</p>
        <p>{{emps.name}}</p>
        <p>{{emps.age}}</p>
        </div>
                        </div>


                    </div>
                    <div class="MS-controls">
                        <button class="MS-left"><i class="fa fa-angle-left" aria-hidden="true"></i></button>
                        <button class="MS-right"><i class="fa fa-angle-right" aria-hidden="true"></i></button>
                    </div>
                </div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
<script src="js/multislider.js"></script> 
<script>

        $('#mixedSlider').multislider({
            duration: 750,
            interval: false
        });
</script>

— mắt cá chân
nguồn