एनजी-रिपीट के अंदर एनजी-क्लिक फ़ंक्शन के लिए पैरामीटर जोड़ना काम नहीं करता है


386

मेरे पास ng-repeatइस तरह से एक सरल लूप है :

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

नियंत्रक में एक फ़ंक्शन है $scope.removeTask(taskID)

जहां तक ​​मुझे पता है कि कोणीय पहले दृश्य को प्रस्तुत करेगा और {{task.id}}एक नंबर के साथ प्रक्षेपित की जगह लेगा , और फिर, क्लिक ईवेंट पर, ng-clickस्ट्रिंग का मूल्यांकन करेगा ।

इस मामले में ng-clickपूरी तरह से वही मिलता है जो अपेक्षित है, अर्थात: ng-click="removeTask(5)".हालाँकि ... यह कुछ भी नहीं कर रहा है।

बेशक मैं सरणी या यहां तक ​​कि डोम task.idसे प्राप्त करने के लिए एक कोड लिख सकता हूं $tasks, लेकिन यह कोणीय तरीके से नहीं लगता है।

तो, ng-clickकोई ng-repeatलूप के अंदर निर्देशन के लिए गतिशील सामग्री कैसे जोड़ सकता है ?

जवाबों:


742

के बजाय

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

यह करो:

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

कृपया इस फिडेल को देखें:

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


1
+1: यह भी काम करता है यदि आपकी ng-clickअभिव्यक्ति कोष्ठक का उपयोग नहीं करती है, अर्थातng-click="taskData.currentTaskId = task.id"
एंड्रयू 4

धन्यवाद सर..मैंने बहुत सारे ब्लॉग देखे लेकिन मेरी समस्या आपके समाधान से ही है।
चिराग सुथार

52

एक चीज जो वास्तव में मुझे लटका देती थी, वह थी जब मैंने ब्राउज़र में इस html का निरीक्षण किया, तो देखने के बजाय इसे कुछ इस तरह विस्तारित किया:

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

मैंने देखा:

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

हालांकि, बाद के काम करता है!

ऐसा इसलिए है क्योंकि आप "कोणीय विश्व" में हैं, जब एनजी-क्लिक के अंदर = "" कोणीय सभी तैयार कार्य के बारे में जानता है। जैसा कि आप अंदर हैं यह मॉडल है। डेटा बाइंडिंग का उपयोग करने की कोई आवश्यकता नहीं है, जैसा कि {{}} में है।

इसके अलावा, यदि आप कार्य ऑब्जेक्ट को स्वयं पास करना चाहते हैं, तो आप पसंद कर सकते हैं:

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

यदि आपका तरीका एक स्ट्रिंग की तलाश में है तो यह कैसे काम करेगा?

1
@ डिनर्डो यह नहीं होगा। "removeTask (कार्य)" करने के लिए आपको कार्य ऑब्जेक्ट प्राप्त करने और उस ऑब्जेक्ट से आईडी प्रॉपर्टी प्राप्त करने की अपेक्षा करने के लिए विधि को बदलना होगा।
जिम रेबेरिन

9

यह भी ध्यान देने योग्य है कि जो लोग अपनी खोजों में इसे ढूंढते हैं, क्या यह है ...

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

का मूल्य नोट करें ng-clickgoTo()बाइंडिंग ऑब्जेक्ट ( button) की एक संपत्ति से पारित पैरामीटर एक स्ट्रिंग है , लेकिन यह उद्धरणों में लिपटा नहीं है। लगता है कि AngularJS हमारे लिए संभालता है। मैं उस पर कुछ मिनट के लिए लटका हुआ था।


3

यह काम। धन्यवाद। मैं कस्टम html इंजेक्ट कर रहा हूं और कंट्रोलर में कोणीय का उपयोग करके इसे संकलित करता हूं।

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

1

उपरोक्त उत्तर उत्कृष्ट हैं। आप निम्नलिखित पूर्ण कोड उदाहरण को देख सकते हैं ताकि आप वास्तव में जान सकें कि कैसे उपयोग किया जाए

  	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>


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>

जावा स्क्रिप्ट:

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

0

यहाँ एनजी क्लिक फ़ंक्शन के साथ और स्लाइडर के साथ संलग्न करने के लिए एनजी रिपीट है

<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>
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.