angularjs - ng-click angular 4
Agregar parámetros a la función ng-click dentro de ng-repeat no parece funcionar (7)
Aquí está la repetición ng con la función de clic ng y adjuntar con el control deslizante
<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>
Tengo un bucle simple con ng-repeat así:
<li ng-repeat=''task in tasks''>
<p> {{task.name}}
<button ng-click="removeTask({{task.id}})">remove</button>
</li>
Hay una función en el controlador $scope.removeTask(taskID) .
Por lo que sé, Angular primero representará la vista y reemplazará {{task.id}} interpolada con un número, y luego, al hacer clic en el evento, evaluará la cadena de ng-click .
En este caso, ng-click obtiene totalmente lo que se espera, es decir: ng-click="removeTask(5)". Sin embargo ... no está haciendo nada.
Por supuesto, puedo escribir un código para obtener task.id desde la matriz $tasks task.id o incluso el DOM, pero esto no parece ser la forma Angular.
Entonces, ¿cómo se puede agregar contenido dinámico a la directiva ng-click dentro de un ciclo de ng-repeat ?
En lugar de
<button ng-click="removeTask({{task.id}})">remove</button>
hacer esto:
<button ng-click="removeTask(task.id)">remove</button>
Por favor vea este violín:
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>
Script de Java:
//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 );
};
}]);
Las respuestas anteriores son excelentes. Puede ver el siguiente ejemplo de código completo para saber exactamente cómo usar
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 »</a></li>
<li><a href="/YtEdit/details/">YtEdit »</a></li>
<li><a href="/GWeather/details/">GWeather »</a></li>
<li role="separator" class="divider"></li>
<li><a href="/WadStore/details/">WadStore »</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>
También vale la pena señalar, para las personas que encuentran esto en sus búsquedas, es esto ...
<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>
Tenga en cuenta el valor de ng-click . El parámetro pasado a goTo() es una cadena de una propiedad del objeto de enlace (el button ), pero no está entre comillas. Parece que AngularJS maneja eso por nosotros. Me quedé colgado de eso por unos minutos.
Una cosa que realmente me colgó fue cuando inspeccioné este html en el navegador, en lugar de verlo expandido a algo como:
<button ng-click="removeTask(1234)">remove</button>
Yo vi:
<button ng-click="removeTask(task.id)">remove</button>
Sin embargo, este último funciona!
Esto se debe a que se encuentra en el "Mundo Angular", cuando dentro de ng-click = "" Angular, todo listo sabe sobre task.id cuando está dentro de su modelo. No es necesario utilizar el enlace de datos, como en {{}}.
Además, si desea pasar el objeto de tarea en sí, puede:
<button ng-click="removeTask(task)">remove</button>
esto funciona. Gracias. Estoy inyectando html personalizado y lo compilo usando angular en el controlador.
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);