এনজি-রিপিটের অভ্যন্তরে এনজি-ক্লিক ফাংশনে প্যারামিটার যুক্ত করা কার্যকর বলে মনে হচ্ছে না


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"
অ্যান্ড্রু

ধন্যবাদ স্যার..আমি প্রচুর ব্লগ দেখেছি তবে আমার সমস্যার সমাধান আপনার সমস্যার সমাধান হয়ে গেছে।
চিরাগ সুথার

52

একটি জিনিস যা আমাকে সত্যিই ঝুলিয়ে দিয়েছিল, তা ছিল যখন আমি ব্রাউজারে এই এইচটিএমএলটি পরিদর্শন করেছিলাম, এটির পরিবর্তে এমন কিছুতে প্রসারিত না দেখে:

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

আমি দেখেছিলাম:

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

তবে, পরবর্তীকালের কাজ!

এটি কারণ আপনি "কৌণিক ওয়ার্ল্ড" এ রয়েছেন, যখন এনজি-ক্লিক = "" ভিতরে থাকেন তখন কৌনিক সমস্ত প্রস্তুত টাস্ক.আইডি সম্পর্কে জানেন কারণ আপনি এর মডেলের অভ্যন্তরে রয়েছেন। B {}} হিসাবে ডেটা বাইন্ডিং ব্যবহার করার দরকার নেই}

এছাড়াও, আপনি যদি টাস্কটি নিজেই পাস করতে চান তবে আপনি পছন্দ করতে পারেন:

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

আপনার পদ্ধতিটি যদি কোনও স্ট্রিং সন্ধান করে তবে এই কীভাবে কাজ করবে?

1
@ দিনারডো এটি করবে না। "অপসারণ টাস্ক (টাস্ক)" করতে আপনাকে কোনও টাস্ক অবজেক্ট পাওয়ার প্রত্যাশা করার জন্য পদ্ধতিটি পরিবর্তন করতে হবে এবং সেই বস্তু থেকে আইডি সম্পত্তি পাবেন।
জিম রাইনারি

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-click। প্রদত্ত প্যারামিটারটি goTo()বাইন্ডিং অবজেক্ট (দ্য button) এর সম্পত্তি থেকে একটি স্ট্রিং , তবে এটি উদ্ধৃতিতে আবৃত হয় না। দেখে মনে হচ্ছে AngularJS আমাদের জন্য এটি পরিচালনা করে। আমি কয়েক মিনিটের জন্য এটি স্তব্ধ হয়ে গেলাম।


3

এইটা কাজ করে. ধন্যবাদ। আমি কাস্টম এইচটিএমএল ইনজেকশন করছি এবং নিয়ামকটিতে কৌনিক ব্যবহার করে এটি সংকলন করছি।

        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

এইচটিএমএল:

<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>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.