Insert image in html only once - javascript

This is in the JS file
(function(){
var app = angular.module('myApp', []);
app.controller('appController',[ '$scope', '$http', function($scope, $http){
$http.get('auto_data.json').then(function(quizData){
$scope.myQuestions = quizData.data;
});
}]);
})();
This is the JSON
{
"question" : "Saturn is the ______ planet from the Sun.",
"image" : "images/category/1.jpg",
"answers" : [
{"id" : 0, "text" : "Fourth" },
{"id" : 1, "text" : "Sixth" },
{"id" : 2, "text" : "Second" },
{"id" : 3, "text" : "Eight" }
],
"correct" : 1
}
And this is my HTML
<!DOCTYPE HTML>
<html ng-app="myApp">
<div id="myQuiz" ng-controller="appController">
<div ng-repeat="myQuestion in myQuestions " >
<h2 class="txt" >{{myQuestion.question}}</h2>
<div ng-repeat="answer in myQuestions[$index].answers">
<p>{{answer.text}}</p>
<img ng-src="{{myQuestion.image}}" >
</div>
</div>
</div>
<script src="js/angular.min.js"></script>
<script src="js/quiz_test.js"></script>
</html>
In this situation the image shows up 3 times on the page. How to make the image show up only once?

Move the <img ng-src="{{myQuestion.image}}" > below the the closing </div> under its current position. It's shown multiple times because it's caught up in ng-repeat.

You can either place the image outside the inner ng-repeat, or you can conditionally display it by $index.
<div ng-repeat="myQuestion in myQuestions">
...
<div ng-repeat="answer in myQuestion.answers">
<p>{{answer.text}}</p>
<img ng-src="{{myQuestion.image}}" ng-if="$index == 0"/>
</div>
</div>

Related

function inside ngRepeat executed too often

I have three tabs that has different html inside ng-include. These tabs are shown using ng-repeat. Only one HTML template contains function call, but it's executed 3 times (once per ng-repeat iteration). What is wrong here and how to fix it?
var app = angular.module('myApp', [])
app.controller('myCtrl', [
'$scope',
function($scope){
$scope.randomFnc = function (i) {
console.log(i);
return "Placeholder text";
}
$scope.tabs = [
"a",
"b",
"c"
];
}
])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div ng-repeat="tab in tabs">
<div ng-if="$index == 1">
{{$index}}<input type="text" value="" placeholder="{{randomFnc($index)}}"/>
</div>
<div ng-if="$index != 1">{{$index}}</div>
</div>
</div>
</div>
You can use ng-init though it is not highly recommended to achieve this. The reason why your function call is being executed thrice is because angular doesn't know if any $scope value has changed during each digest cycle. So the function will get executed for each digest cycles. In your case, it will get executed when the ng-if conditions become true as well as during the two digest cycles accounting a total of three. This is the reason why it gets executed 3 times with the value 1 regardless of the number of items in the array.
var app = angular.module('myApp', [])
app.controller('myCtrl', [
'$scope',
function($scope) {
$scope.x = {};
$scope.randomFnc = function() {
console.log("once");
$scope.placeholderText = "Placeholder text";
}
$scope.tabs = [
"a",
"b",
"c"
];
}
])
app.directive('trackDigests', function trackDigests($rootScope) {
function link($scope, $element, $attrs) {
var count = 0;
function countDigests() {
count++;
$element[0].innerHTML = '$digests: ' + count;
}
$rootScope.$watch(countDigests);
}
return {
restrict: 'EA',
link: link
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div ng-repeat="tab in tabs">
<div ng-if="$index == 1" ng-init="randomFnc()">
{{$index}}<input type="text" value="" placeholder="{{placeholderText}}" />
</div>
<div ng-if="$index != 1">{{$index}}</div>
</div>
</div>
<track-digests></track-digests>
</div>
Call a method for 3 times because placeholder attribute or other attributes like this as class or ... can't define the ng- in angularjs, for solution we can use ng-init to handle it.
when you run the first you have repeat and then binding elements and then your angular attributes runs.
for best solution i refer to use model as object to binding placeholder on it, it's easily.
var app = angular.module('myApp', [])
app.controller('myCtrl', [
'$scope',
function($scope){
$scope.placeholder = "";
$scope.randomFnc = function (tab) {
$scope.placeholder = "Placeholder text";
}
$scope.tabs = [
"a",
"b",
"c"
];
//----2
$scope.randomFnc2 = function (tab) {
tab.placeholder = "Placeholder text";
}
$scope.tabs2 = [
{name: "a"},
{name: "b"},
{name: "c"},
];
}
])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<h1>better if you use model</h1>
<div ng-repeat="tab in tabs2">
<div ng-if="$index == 1" ng-init="randomFnc2(tab)">
{{$index}}
<input type="text" value="" placeholder="{{tab.placeholder}}"/>
</div>
<div ng-if="$index != 1">{{$index}}</div>
</div>
<h1>also you can</h1>
<div ng-repeat="tab in tabs">
<div ng-if="$index == 1" ng-init="randomFnc(tab)">
{{$index}}
<input type="text" value="" placeholder="{{placeholder}}"/>
</div>
<div ng-if="$index != 1">{{$index}}</div>
</div>
</div>
</div>

json not working in Angular

I'm a beginner in Angular so I hope someone to help me!
This is my script.js
ar app = angular.module('computer', ['ngRoute'])
.config(['$routeProvider',function($routeProvider) {
$routeProvider
.when('/main', {
templateUrl : 'main.html',
controller : 'MainCtrl'
})
.when('/service', {
templateUrl : 'service.html',
controller : 'ServicesCtrl'
})
.otherwise({redirectTo:'/main'});
}])
.controller('MainCtrl', ['$scope', function($scope){
}])
.controller('ServicesCtrl', ['$scope','$http', function($scope,$http){
$http.get('serviceData.json').then(function(response){
console.log(response);
$scope.services = response.data;
});
}]);
and this is service.html
<div class="row">
<div class="col-md-12">
<h2>Services</h2>
<div ng-repeat="serv in services">
<div class="row service">
<div class="col-md-2">
<img src="computer-icon.png" class="img-responsive">
</div>
<div class="col-md-10">
<h3>{{ serv.id : serv.name }}</h3>
<p>{{serv.Description}}</p>
<button class="btn btn-primary">Read More…</button>
</div>
</div>
</div>
</div>
and serviceData.json
[{
"id": 1,
"name": "Reparation",
"Description": "Reparation of your hardware"
}, {
"id": 2,
"name": "Installation",
"Description": "Installation of your hardware"
}, {
"id": 3,
"name": "Reparation and Reset",
"Description": "Reparation and Reset of your hardware"
}]
But I have this error in console
angular.min.js:118 Error: [$parse:syntax] http://errors.angularjs.org/1.5.8/$parse/syntax?p0=%3A&p1=is%20an%20unexpected%20token&p2=9&p3=serv.id%20%3A%20service.name&p4=%3A%20service.name
and anything display in screen.
Thank you for help !
You have to use the following line:
<h3>{{ serv.id : serv.name }}</h3>
like this:
<h3>{{ serv.id}} : {{serv.name }}</h3>

Angular Load Json Error

I'm an Angular beginner.
I want to load a json on load, this works well
but if I make a change to an input field, I get an error message.
Error: $rootScope:infdig Infinite $digest Loop
Thanks
My HTML
<body ng-app="myApp" ng-controller="mainCtrl">
<div id="wrapper">
<header style="height:50px;"> </header>
<div class="container">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="js/controller.js"></script>
<section>
<div class="col-md-4">
<label for="words">Wörter</label>
<input ng-model="words" id="words" type="number" name="words" placeholder="Wörter" min="10" max="10000" value="{{words}}" step="10">
</div>
<p>{{words}}</p>
<div id="view" class="col-md-6">
<ul ng-controller="loadContent">
<li ng-repeat="content in contents | orderBy:random">{{content.text}}</li>
</ul>
</div>
</section>
</div>
</div>
My javascript
var app = angular.module('myApp', []);
app.controller('mainCtrl', function ($scope, $http) {
$scope.words = 40;
$scope.letterLimit = 400;
});
app.controller('loadContent', function ($scope, $http) {
$scope.random = function () {
return 0.5 - Math.random();
}
$scope.loadContent = function() {
var def = $http.get('data.json').success(function(data) {
$scope.contents = data;
});
}
$scope.loadContent();
});
My json
[
{"text": "Lorem ipsum1", "date" : true},
{"text": "Lorem ipsum2", "data" : true},
{"text": "Lorem ipsum3", "data" : true}
]
I think that angular is continuously disgesting your controller as soon as you interact with the view, and is therefore executing $scope.loadContent(); at the bottom of your controller repeatedly.
I assume you only wish for this to fire once? If so, remove the function call from your controller and modify your view as below.
<body ng-app="myApp" ng-controller="mainCtrl" ng-init="loadContent">
With this, $scope.loadContent is only called once. if you wish to call it another way, or multiple times, please specify in your question.

ui-bootstrap Angular modal resolve and Scope value

I am relatively new to angular and I have integrated Bootstrap modal to my project but I am not able to use the value from "programcontroller".
I want id_program from "programcontroller" inside the "ModalInstanceCtrl" controller. I tried adding it in the RESOLVE but I was not able to get the data.
I got the hardcoded data using the RESOLVE from "programcontroller" successfully inside "ModalInstanceCtrl" controller of modal.
But since I get the id_prgram using this snipet:
<input type="text" ng-hide=" true" ng-model="id_program" ng-init="id_program=item._id">
The above code is inside ng-repeat block and gets populated. I do know that it is because of asynchronous that causes the problem.
I have attached the code for your reference.
catalogapp.controller('programcontroller', function ($scope, $uibModal, $log, $routeParams) {
$scope.id_program = "";
$scope.title_program = "";
$scope.filter_program = $routeParams.seasonId;
$scope.season_number = $routeParams.seasonNumber;
$scope.model = {
//got this from previous HTML page as routeparams
season_id : $routeParams.seasonId
}
$scope.animationsEnabled = true;
$scope.program_array = [
{
"_id" : "program:a8097ae943bdbd372906ea494ddecbf2",
"series" : "series:fcde9691e624ba50df9be71735f4bb14",
"title" : "title1",
"season" : "season:a6e4d728c316cdffa933490d4f538251",
},
{
"_id" : "urn:esp:hbo:program:testprogram20160310",
"title" : "title1",
"series" : "series:4f19358c7377482f1310e5cfa06c5bd2",
"season" : "season:a6e4d728c316cdffa933490d4f538251",
}
]
$scope.items = [
{
"title" : "title",
"_id" : "program:version:2541203f297f8f0d",
"shortTitle" : "shtitle",
"program" : "program:f555feb8dafc1bae42d",
},
{
"title" : "title2",
"_id" : "program:version:40a2313f297f8f0d",
"shortTitle" : "shtitle2",
"program" : "program:f55asfsa57927411bd6545feb8dafc1bae42d",
},
{
"title" : "title3",
"_id" : "program:version:403f297f8f0d",
"shortTitle" : "shtitle3",
"program" : "program:asdf5557927411bd6545feb8dafc1bae42d",
}
]
$scope.open = function (size) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
backdrop: 'static',
resolve: {
items1: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
}
});
catalogapp.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items1) {
$scope.items = items1;
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
HTML Code is given below!!!!
<!doctype html>
<html>
<head>
<title>HBO ESP Console</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-route.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/main.css">
<script src="/controllers/programcontroller.js"></script>
</head>
<body style="background-color:#44484a">
<h2>Program List</h2>
<script type="text/ng-template" id="myModalContent.html">
<body ng-controller="ModalInstanceCtrl">
<div class="modal-header">
<h3 class="modal-title">Program Version</h3>
</div>
<div class="modal-body" style="float:left">
<ul ng-repeat="item in items" style="list-style-type:none">
<li class="image">
<button type="button" style="background-color: #555555" class="btn btn-default">
<img ng-src="http://icons.iconarchive.com/icons/atti12/tv-series-folder/512/Game-of-Thrones-icon.png" height="200" width="200" />
</button>
</li>
</ul>
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</body>
</script>
<div ng-controller="programcontroller">
<input ng-hide=" true" type="text" ng-model="filter_program"><br><br>
<p ng-hide=" true">Season_id: {{model.season_id}}</p>
<p style="font-size:18px">Season Number:{{season_number}}</p>
<div style="float:left">
<div style="float:left">
<ul ng-repeat=" item in program_array | filter : filter_program" style=" list-style-type:none;float:left">
<li class="image">
<input type="text" ng-hide=" true" ng-model="id_program" ng-init="id_program=item._id">
<input type="text" ng-hide=" true" ng-model="title_program" ng-init="title_program=item.title">
<button type="button" style="background-color: #555555" class="btn btn-default" ng-click="open('lg')">
<img ng-src="http://icons.iconarchive.com/icons/atti12/tv-series-folder/512/Game-of-Thrones-icon.png" height="200" width="200" />
</button>
<p>{{item.title}}</p>
{{id_program}}
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
PLEASE help me with this guys!!!!!! Thanks
You are trying to access the filter value even before angular has processed it.
Here is the solution
<ul ng-repeat="it in itm">
<li>
{{it._id}}
<input type="text" ng-hide="true" >
<button type="button" class="btn btn-default" ng-click="setFilter(it._id);open('lg')">Large modal --- {{it._id}}</button>
</li>
</ul>
Controller
$scope.setFilter = function (filterValue) {
$scope.filter = filterValue;
}
Here is the Plunkr
Hope this helps!!
remove ng-controller="ModalInstanceCtrl" from
<script type="text/ng-template" id="myModalContent.html">
and see what happens.

ng-repeat doesn't display anything

<div ng-controller="Ctrl">
<div class="" ng-repeat="data in mydata">
{{data.b.three}}
</div>
function Ctrl($scope) {
$scope.mydata = [{
"a":"",
"b":[{
"one":"",
"two": "",
"three": "1"
}]
}]
}
I expect it will return '1' but it didn't, also there is no error message in my console.
Html :
<div ng-app="print" ng-controller="Ctrl ">
<div ng-repeat="data in mydata">
{{data.b[0].three}}
</div>
JS :
angular.module('print', []).
controller('Ctrl',function ($scope) {
$scope.mydata = [{
"a":"",
"b":[{
"one":"",
"two": "",
"three": "1"
}]
}]
});
You can find all here : https://jsfiddle.net/k0tx4qzv/

Categories