ng-repeat 내의 ng-click 함수에 파라미터를 추가하는 것이 동작하지 않는 것 같습니다.
나는 에 대해 단순한 루프를 가지고 있다.ng-repeat다음과 같습니다.
<li ng-repeat='task in tasks'>
<p> {{task.name}}
<button ng-click="removeTask({{task.id}})">remove</button>
</li>
컨트롤러에 기능이 있습니다.$scope.removeTask(taskID).
내가 아는 한 Angular는 먼저 보기를 렌더링하고 보간된 보기를 바꿉니다.{{task.id}}숫자를 입력하고 클릭 시 이벤트에 따라ng-click스트링
이 경우ng-click완전히 예상대로의 결과를 얻을 수 있습니다.ng-click="removeTask(5)".하지만...아무것도 안 해요
물론 암호를 써서task.id에서$tasks어레이, 또는 DOM도 마찬가지입니다만, 이것은 Angular 방식이라고는 생각되지 않습니다.
그럼 어떻게 하면 다이내믹 콘텐츠를ng-click내부의 지시ng-repeat루프?
대신
<button ng-click="removeTask({{task.id}})">remove</button>
다음을 수행합니다.
<button ng-click="removeTask(task.id)">remove</button>
이 바이올린을 보세요.
http://jsfiddle.net/JSWorld/Hp4W7/34/
한 가지 마음에 걸리는 것은 브라우저로 이 html을 검사했을 때 다음과 같이 확장되는 것을 보는 것이 아니라 다음과 같은 것입니다.
<button ng-click="removeTask(1234)">remove</button>
나는 보았다:
<button ng-click="removeTask(task.id)">remove</button>
하지만 후자는 효과가 있습니다!
'Angular World'에 있기 때문에 ng-click=" Angular ready는 모델 안에 있는 것처럼 task.id에 대해 알고 있습니다.{{}}과(와) 같이 데이터 바인딩을 사용할 필요가 없습니다.
또한 태스크 개체 자체를 전달하려는 경우 다음을 수행할 수 있습니다.
<button ng-click="removeTask(task)">remove</button>
또한, 검색에서 이것을 발견한 사람들에게 이것은...
<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). 단, 따옴표로 둘러싸여 있지 않습니다.각진 모양그건 JS가 알아서 처리해줘요.나는 몇 분 동안 그것에 매달렸다.
이거면 돼. 고마워커스텀 html을 삽입하여 컨트롤러에 angular를 사용하여 컴파일하고 있습니다.
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);
위의 답변은 훌륭합니다.다음 풀코드의 예를 보면 사용방법을 정확하게 알 수 있습니다.
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>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 );
};
}]);
여기 ng click 기능과 슬라이더 추가 기능이 있는 ng repeat이 있습니다.
<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>
언급URL : https://stackoverflow.com/questions/17039926/adding-parameter-to-ng-click-function-inside-ng-repeat-doesnt-seem-to-work
'programing' 카테고리의 다른 글
| 리액트 라우터 허가 (0) | 2023.03.18 |
|---|---|
| 부모의 범위에 액세스하는 사용자 지정 하위 지시문 (0) | 2023.03.18 |
| $resource, get과 query의 차이점은 무엇입니까? (0) | 2023.03.18 |
| 순환 개체 값을 포함하는 개체를 직렬화하는 중 (0) | 2023.03.18 |
| PHP 네임스페이스 5.3 및 WordPress 위젯 (0) | 2023.03.18 |