ng-click inside the ng-repeat binding all the data with ng-include
Question
I want to include the html page with the help of ng-click inside the ng-repeat. But, it loading all the content for all ng-repeat elements. My requirement was I want to bind(ng-include) only the clicked element.
Please find the attachment for your reference.
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}}
2 answers
solution1
2 2018-02-16 06:49:08
Add to message new property clicked . Set ng-include only when message.clicked is true using ng-if . And when you click , change state of message.clicked on true
Somthing like this:
<!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>
solution2
0 2018-02-16 06:50:36
First you need to add an id your json data as follows:
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 }
]
Next you need to run a filter and find the item on 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";
};
After that, make changes into your Page.html
<p class="info">{{ name }}--{{ message.type }}--{{ message.text }}</p>
<p class="element">
Current Count = ({{ message.clickCount }}), Total Count = ({{ count }})
</p>
At last you need to make the following two HTML changes
1) Add the object in ng-click
<a ng-click="clickMe(message)">Clike Me</a>
2) Specify the condition on ng-include
<div ng-include="templateUrl" ng-if="message.isClicked"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.