[英]ng-click inside ng-repeat to point to sibling div not all divs in ng-repeat
[英]ng-click inside the ng-repeat binding all the data with ng-include
我想在ng-repeat内通过ng-click包含html页面。 但是,它将加载所有ng-repeat元素的所有内容。 我的要求是我只想绑定(ng-include)单击的元素。
请找到附件以供参考。
HTML
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="message in messages">
<a ng-click="clickMe()">Clike Me</a>
<span>{{ message.text }}---{{ message.type }}</span>
<div ng-include="templateUrl"></div>
</div>
</body>
JS
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
var messages = [
{ text: "Standard Message", type: "success000" },
{ text: "Success Message!", type: "success111" },
{ text: "Alert Message!", type: "alert222" },
{ text: "secondary message...", type: "secondary333" }
]
$scope.name = 'shiva';
$scope.count = 0;
$scope.messages = messages;
$scope.clickMe = function () {
// alert('clicked');
$scope.count++;
$scope.templateUrl = "Page.html";
};
});
page.html中
<b> Included html Code.{{message.type}}---count={{count}}
添加到message
clicked
新属性。 仅在使用ng-if
设置message.clicked
为true
时设置ng-include
。 而当你click
的改变状态message.clicked
上true
像这样的东西:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',function($scope){
var messages = [
{ text: "Standard Message", type: "success0" ,clicked:false},
{text:"Success Message!", type:"success00",clicked:false},
{text:"Alert Message!", type : "alert2",clicked:false},
{text:"secondary message...", type : "secondary3",clicked:false}
]
$scope.name = 'shiva';
$scope.count = 0;
$scope.messages = messages;
$scope.clickMe = function (message) {
// alert('clicked');
$scope.count++;
message.clicked=true;
$scope.templateUrl = "Page.html";
};
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="message in messages">
<a ng-click="clickMe(message)">Clike Me</a>
<span>{{message.text}}---{{message.type}}</span>
<div ng-if="message.clicked" ng-include="templateUrl"></div>
</div>
</body>
</html>
首先,您需要为json数据添加一个id
,如下所示:
var messages = [
{ id: "101", text: "Standard Message", type: "success0", clickCount: 0 },
{ id: "102", text: "Success Message!", type: "success00", clickCount: 0 },
{ id: "103", text: "Alert Message!", type: "alert2", clickCount: 0 },
{ id: "104", text: "secondary message...", type: "secondary3", clickCount: 0 }
]
接下来,您需要运行filter
并在ng-click
上找到该项目
$scope.clickMe = function (obj) {
$scope.messages.forEach(function (value, key) {
if (value.id === obj.id) {
value.isClicked = true;
value.clickCount++;
}
});
$scope.count++;
$scope.templateUrl = "Page.html";
};
之后,对您的Page.html进行更改
<p class="info">{{ name }}--{{ message.type }}--{{ message.text }}</p>
<p class="element">
Current Count = ({{ message.clickCount }}), Total Count = ({{ count }})
</p>
最后,您需要进行以下两个HTML更改
1)在ng-click
添加对象
<a ng-click="clickMe(message)">Clike Me</a>
2)在ng-include
上指定条件
<div ng-include="templateUrl" ng-if="message.isClicked"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.