Menambahkan parameter ke fungsi ng-klik di dalam ng-repeat sepertinya tidak berfungsi

386

Saya memiliki loop sederhana dengan ng-repeatseperti ini:

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

Ada fungsi di controller $scope.removeTask(taskID).

Sejauh yang saya tahu, Angular pertama-tama akan menampilkan tampilan dan mengganti yang diinterpolasi {{task.id}}dengan angka, dan kemudian, pada acara klik, akan mengevaluasi ng-clickstring.

Dalam hal ini ng-clickmendapatkan sepenuhnya apa yang diharapkan, yaitu: ng-click="removeTask(5)".Namun ... itu tidak melakukan apa-apa.

Tentu saja saya dapat menulis kode untuk mendapatkan task.iddari $tasksarray atau bahkan DOM, tetapi ini tidak tampak seperti cara Angular.

Jadi, bagaimana seseorang dapat menambahkan konten dinamis ke ng-clickdalam sebuah ng-repeatloop?

angularjs ng-repeat angularjs-ng-click

— Paweł Szymański
sumber

742

Dari pada

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

melakukan hal ini:

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

Silakan lihat biola ini:

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

— Bocah Chubby
sumber

1

+1: ini juga berfungsi jika ng-clickekspresi Anda tidak menggunakan tanda kurung, yaitung-click="taskData.currentTaskId = task.id"

— Andrew

Terima kasih Pak..Saya melihat banyak blog tetapi masalah saya terpecahkan oleh solusi Anda.

— Chirag Suthar

52

Satu hal yang benar-benar membuat saya terhenti, adalah ketika saya memeriksa html ini di browser, alih-alih melihatnya diperluas menjadi seperti:

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

Saya melihat:

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

Namun, yang terakhir bekerja!

Ini karena Anda berada di "Dunia Sudut", ketika di dalam ng-klik = "" Sudut semua siap tahu tentang task.id karena Anda berada di dalam model itu. Tidak perlu menggunakan Data binding, seperti pada {{}}.

Lebih lanjut, jika Anda ingin melewatkan objek tugas itu sendiri, Anda bisa menyukai:

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

— alcoholiday
sumber

Bagaimana ini bekerja jika metode Anda mencari string?

1

@ Donat tidak akan. untuk melakukan "removeTask (tugas)" Anda harus mengubah metode yang diharapkan untuk mendapatkan objek tugas dan mendapatkan properti id dari objek itu.

— Jim Reineri

9

Juga patut dicatat, bagi orang-orang yang menemukan ini dalam pencarian mereka, apakah ini ...

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

Perhatikan nilai ng-click. Parameter yang diteruskan ke goTo()adalah string dari properti objek yang mengikat (the button), tetapi tidak dibungkus dengan tanda kutip. Sepertinya AngularJS yang menangani itu untuk kita. Saya menutup telepon selama beberapa menit.

— kevin628
sumber

3

ini bekerja. Terima kasih. Saya menyuntikkan html khusus dan kompilasi menggunakan sudut pada controller.

        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
sumber

1

Jawaban di atas sangat bagus. Anda dapat melihat contoh kode lengkap berikut ini sehingga Anda benar-benar tahu cara menggunakannya

  	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>

Luaskan cuplikan

— camar
sumber

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>

Java Script:

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

0

Ini adalah pengulangan dengan fungsi klik ng dan untuk menambahkan dengan slider

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

— ankush
sumber