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?
This question is related to
angularjs
ng-repeat
angularjs-ng-click
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>
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 );
};
}]);
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);
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>
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', []);_x000D_
_x000D_
app.controller('usersCtrl', function($scope, $http) {_x000D_
$http.get("https://jsonplaceholder.typicode.com/users").then(function (response) {_x000D_
console.log(response.data)_x000D_
_x000D_
$scope.users = response.data;_x000D_
$scope.setKey = function (userId){_x000D_
alert(userId)_x000D_
if(localStorage){_x000D_
localStorage.setItem("userId", userId)_x000D_
} else {_x000D_
alert("No support of localStorage")_x000D_
return_x000D_
}_x000D_
}//function closed _x000D_
});_x000D_
}); #header{_x000D_
color: green;_x000D_
font-weight: bold;_x000D_
} <!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
<title>HyperCrud</title>_x000D_
<meta charset="utf-8">_x000D_
<meta name="viewport" content="width=device-width, initial-scale=1">_x000D_
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>_x000D_
</head>_x000D_
<body>_x000D_
<!-- NAVBAR STARTS -->_x000D_
<nav class="navbar navbar-default navbar-fixed-top">_x000D_
<div class="container">_x000D_
<div class="navbar-header">_x000D_
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">_x000D_
<span class="sr-only">Toggle navigation</span>_x000D_
<span class="icon-bar"></span>_x000D_
<span class="icon-bar"></span>_x000D_
<span class="icon-bar"></span>_x000D_
</button>_x000D_
<a class="navbar-brand" href="#">HyperCrud</a>_x000D_
</div>_x000D_
<div id="navbar" class="navbar-collapse collapse">_x000D_
<ul class="nav navbar-nav">_x000D_
<li class="active"><a href="/">Home</a></li>_x000D_
<li><a href="/about/">About</a></li>_x000D_
<li><a href="/contact/">Contact</a></li>_x000D_
<li class="dropdown">_x000D_
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Apps<span class="caret"></span></a>_x000D_
<ul class="dropdown-menu">_x000D_
<li><a href="/qAlarm/details/">qAlarm »</a></li>_x000D_
<li><a href="/YtEdit/details/">YtEdit »</a></li>_x000D_
<li><a href="/GWeather/details/">GWeather »</a></li>_x000D_
<li role="separator" class="divider"></li>_x000D_
<li><a href="/WadStore/details/">WadStore »</a></li>_x000D_
<li><a href="/chatsAll/details/">chatsAll</a></li>_x000D_
</ul>_x000D_
</li>_x000D_
</ul>_x000D_
<ul class="nav navbar-nav navbar-right">_x000D_
<li><a href="/login/">Login</a></li>_x000D_
<li><a href="/register/">Register</a></li>_x000D_
<li><a href="/services/">Services<span class="sr-only">(current)</span></a></li>_x000D_
</ul>_x000D_
</div>_x000D_
</div>_x000D_
</nav>_x000D_
<!--NAVBAR ENDS-->_x000D_
<br>_x000D_
<br>_x000D_
_x000D_
<div ng-app="hyperCrudApp" ng-controller="usersCtrl" class="container">_x000D_
<div class="row">_x000D_
<div class="col-sm-12 col-md-12">_x000D_
<center>_x000D_
<h1 id="header"> Users </h1>_x000D_
</center>_x000D_
</div>_x000D_
</div>_x000D_
_x000D_
<div class="row" >_x000D_
<!--ITERATING USERS LIST-->_x000D_
<div class="col-sm-6 col-md-4" ng-repeat="user in users">_x000D_
<div class="thumbnail">_x000D_
<center>_x000D_
<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">_x000D_
<hr>_x000D_
</center>_x000D_
<div class="caption">_x000D_
<center>_x000D_
<h3>{{user.name}}</h3>_x000D_
<p>{{user.email}}</p>_x000D_
<p>+91 {{user.phone}}</p>_x000D_
<p>{{user.address.city}}</p>_x000D_
</center>_x000D_
</div>_x000D_
<div class="caption">_x000D_
<a href="/users/delete/{{user.id}}/" role="button" class="btn btn-danger btn-block" ng-click="setKey(user.id)">DELETE</a>_x000D_
<a href="/users/update/{{user.id}}/" role="button" class="btn btn-success btn-block" ng-click="setKey(user.id)">UPDATE</a>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
_x000D_
<div class="col-sm-6 col-md-4">_x000D_
<div class="thumbnail">_x000D_
<a href="/regiser/">_x000D_
<img src="http://img.bhs4.com/b7/b/b7b76402439268b532e3429b3f1d1db0b28651d5_large.jpg" alt="Register Image" class="img-responsive img-circle" style="width: 100%">_x000D_
</a>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
<!--ROW ENDS-->_x000D_
</div>_x000D_
_x000D_
_x000D_
</body>_x000D_
</html>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.
Source: Stackoverflow.com