ChatGPT解决这个技术问题 Extra ChatGPT

Adding parameter to ng-click function inside ng-repeat doesn't seem to work

I have a simple loop with ng-repeat like this:

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

There is a function in the controller $scope.removeTask(taskID).

As far as I know Angular will first render the view and replace interpolated {{task.id}} with a number, and then, on click event, will evaluate ng-click string.

In this case ng-click gets totally what is expected, ie: ng-click="removeTask(5)". However... it's not doing anything.

Of course I can write a code to get task.id from the $tasks array or even the DOM, but this does not seem like the Angular way.

So, how can one add dynamic content to ng-click directive inside a ng-repeat loop?


C
Chubby Boy

Instead of

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

do this:

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

Please see this fiddle:

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


+1: this also works if your ng-click expression doesn't use brackets, i.e. ng-click="taskData.currentTaskId = task.id"
Thanks Sir..I seen lots of blog but my problem is solved by your solution.
H
Hans

One thing that really hung me up, was when I inspected this html in the browser, instead of seeing it expanded to something like:

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

I saw:

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

However, the latter works!

This is because you are in the "Angular World", when inside ng-click="" Angular all ready knows about task.id as you are inside it's model. There is no need to use Data binding, as in {{}}.

Further, if you wanted to pass the task object itself, you can like:

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

How would this work if your method is looking for a string?
@Dinerdo it wouldn't. to do "removeTask(task)" you would have to change the method to expect to get a task object and get the id property from that object.
k
kevin628

Also worth noting, for people who find this in their searches, is this...

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

Note the value of ng-click. The parameter passed to goTo() is a string from a property of the binding object (the button), but it is not wrapped in quotes. Looks like AngularJS handles that for us. I got hung up on that for a few minutes.


s
srisanju

this works. thanks. I am injecting custom html and compile it using angular in the 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);

h
hygull

Above answers are excellent. You can look at the following full code example so that you could exactly know how to use

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



Users

Image - {{user.name}}

{{user.name}}

{{user.email}}

+91 {{user.phone}}

{{user.address.city}}


H
Hitesh Sahu

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

a
ankush

Here is the ng repeat with ng click function and to append with 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>