Im converting a site from php and Angular to Vue Im pretty new to both but I'm 99% done. I need to watch when the data changes. its basically a league table and when some one goes up it css they go green when they go down css they go red. Ive tried converting the Angular function here
$scope.$watch(function () {
return $scope.scores;
},
function(newVal, oldVal) {
angular.forEach(newVal, function(value1, key1) {
angular.forEach(oldVal, function(value2, key2) {
if (value1.id === value2.id) {
if (key1 < key2) {
value1.posChang = 'up';
} else if (key1 > key2) {
value1.posChang = 'down';
}
}
});
});
}, true);
and convert to vue here
watch: {
scores: {
immediate: true,
handler (newValue, oldValue) {
console.log(newValue)
console.log(oldValue)
this.newValue.forEach(newValue, function (value1, key1) {
this.oldValue.forEach(oldValue, function (value2, key2) {
if (value1.id === value2.id) {
if (key1 < key2) {
value1.posChang = 'up';
} else if (key1 > key2) {
value1.posChang = 'down';
}
}
});
});
},
deep: true
}
},
it console prints both Old and New but it crashes when it hits the forEach
any help would be great
as requested the whole file :-
<template>
<div id="rScore">
<div class="title">
<h2>{{ data.full_name }} - {{ data.round_head }}</h2>
<br />
<p>
{{ data.course_dates }}
</p>
</div>
<table>
<thead>
<tr class="title" v-if="this.roundsPlayed > 1">
<th :class="cell">
Pos
</th>
<th :class="cell">
Player Name
</th>
<th :class="cell">
Nat.
</th>
<th :class="cell">
Par
</th>
<th
v-for="(i, roundIt) in range(1, roundsPlayed)"
:key="roundIt"
:class="cell"
>
R{{ i }}
</th>
<th :class="cell">
Score
</th>
</tr>
<tr v-else>
<th :class="cell">
Pos
</th>
<th :class="cell">
Player Name
</th>
<th :class="cell">
Nat.
</th>
<th :class="cell">
Par
</th>
<th :class="cell">
Score
</th>
</tr>
</thead>
<tbody v-if="this.roundsPlayed > 1">
<template v-for="(scores, index) in scores">
<tr #click.stop="rowClicked(index)" :key="index + Math.random()">
<td :class="cell">
{{ scores.pos }}
</td>
<td #click="playerCard" :title="scores.member_no" :class="cell">
{{ scores.name }}
</td>
<td :class="cell" :title="scores.nationality">
<span>
<img
:class="flag"
:src="
('https://assets.ocs-sport.com/flags/svg/flag_' +
scores.nationality)
| lowercase
"
/>
</span>
</td>
<td v-if="scores.vspar < 0" :class="[up, cell]">
{{ scores.vspar }}
</td>
<td v-else-if="scores.vspar > 0" :class="[down, cell]">
{{ scores.vspar }}
</td>
<td v-else :class="cell">
{{scores.vspar}}
</td>
<td :class="cell">
<span v-if="scores.vspar_R1 < 0" :class="[up, cell]">
{{ scores.score_R1 }}
</span>
<span v-else-if="scores.vspar_R1 > 0" :class="[down, cell]">
{{ scores.score_R1 }}
</span>
<span v-else :class="cell">
{{ scores.score_R1 }}
</span>
</td>
<td v-if="roundsPlayed > 1" :class="cell">
{{ scores.score_R2 }}
</td>
<td v-if="roundsPlayed > 2" :class="cell">
{{ scores.score_R3 }}
</td>
<td v-if="roundsPlayed > 3" :class="cell">
{{ scores.score_R4 }}
</td>
<td v-if="roundsPlayed > 4" :class="cell">
{{ scores.score_R5 }}
</td>
<td v-if="roundsPlayed > 5" :class="cell">
{{ scores.score_R6 }}
</td>
<td v-if="roundsPlayed > 6" :class="cell">
{{ scores.score_R7 }}
</td>
<td v-else :class="cell">
{{ scores.score }}
</td>
</tr>
<tr
#click.stop="rowClicked(rowClicked === -1)"
v-if="index === clickedRow"
class="tr-kids"
:key="index + Math.random()"
>
<b-row>
<b-col>
<table :class="tableRow">
<thead>
<tr class="titleReport">
<th :class="cellReport">
Hole
</th>
<th :class="cellReport">
1
</th>
<th :class="cellReport">
2
</th>
<th :class="cellReport">
3
</th>
<th :class="cellReport">
4
</th>
<th :class="cellReport">
5
</th>
<th :class="cellReport">
6
</th>
<th :class="cellReport">
7
</th>
<th :class="cellReport">
8
</th>
<th :class="cellReport">
9
</th>
<th :class="cellReport">
OUT
</th>
</tr>
</thead>
<tbody>
<tr class="titleReport">
<td :class="cellReport">
Yards
</td>
<td
:class="cellReport"
v-for="number in playerCardData.course_length_yards
.split(',')
.slice(0, 9)"
:key="number"
>
{{ number }}
</td>
<td :class="cellReport">
{{ playerCardData.course_out_length.slice(1, 6) }}
</td>
</tr>
<tr class="titleReport">
<td :class="cellReport">
Par
</td>
<td
:class="cellReport"
v-for="number in playerCardData.course_par
.split(',')
.slice(0, 9)"
:key="number"
>
{{ number }}
</td>
<td :class="cellReport">
{{ playerCardData.course_out_par.slice(1, 5) }}
</td>
</tr>
<tr
v-for="(i, roundIt1) in range(1, roundsPlayed)"
:key="roundIt1"
:class="cellReport"
>
<td>R{{ i }}</td>
<template v-if="i === 1">
<td
:class="cellReport"
v-for="scoreRound in playerCardData.score_R1
.split(',')
.slice(0, 10)"
:key="scoreRound"
>
<span>
{{ scoreRound }}
</span>
</td>
</template>
<template v-else-if="i === 2">
<td
:class="cellReport"
v-for="scoreRound in playerCardData.score_R2
.split(',')
.slice(0, 10)"
:key="scoreRound"
>
<span>
{{ scoreRound }}
</span>
</td>
</template>
<template v-else-if="i === 3">
<td
:class="cellReport"
v-for="scoreRound in playerCardData.score_R3
.split(',')
.slice(0, 10)"
:key="scoreRound"
>
<span>
{{ scoreRound }}
</span>
</td>
</template>
<template v-else-if="i === 4">
<td
:class="cellReport"
v-for="scoreRound in playerCardData.score_R4
.split(',')
.slice(0, 10)"
:key="scoreRound"
>
<span>
{{ scoreRound }}
</span>
</td>
</template>
<template v-else-if="i === 5">
<td
:class="cellReport"
v-for="scoreRound in playerCardData.score_R5
.split(',')
.slice(0, 10)"
:key="scoreRound"
>
<span>
{{ scoreRound }}
</span>
</td>
</template>
<template v-else-if="i === 6">
<td
:class="cellReport"
v-for="scoreRound in playerCardData.score_R6
.split(',')
.slice(0, 9)"
:key="scoreRound"
>
<span>
{{ scoreRound }}
</span>
</td>
</template>
<template v-else-if="i === 7">
<td
:class="cellReport"
v-for="scoreRound in playerCardData.score_R7
.split(',')
.slice(0, 9)"
:key="scoreRound"
>
<span>
{{ scoreRound }}
</span>
</td>
</template>
</tr>
</tbody>
</table>
</b-col>
<b-col>
<table :class="tableRow">
<thead>
<tr class="titleReport">
<th :class="cellReport">
10
</th>
<th :class="cellReport">
11
</th>
<th :class="cellReport">
12
</th>
<th :class="cellReport">
13
</th>
<th :class="cellReport">
14
</th>
<th :class="cellReport">
15
</th>
<th :class="cellReport">
16
</th>
<th :class="cellReport">
17
</th>
<th :class="cellReport">
18
</th>
<th :class="cellReport">
IN
</th>
<th :class="cellReport">
TOT
</th>
</tr>
</thead>
<tbody>
<tr class="titleReport">
<td
:class="cellReport"
v-for="number in playerCardData.course_length_yards
.split(',')
.slice(9, 18)"
:key="number"
>
{{ number }}
</td>
<td :class="cellReport">
{{ playerCardData.course_in_length.slice(1, 6) }}
</td>
<td :class="cellReport">
{{ playerCardData.course_total_length.slice(1, 6) }}
</td>
</tr>
<tr class="titleReport">
<td
:class="cellReport"
v-for="number in playerCardData.course_par
.split(',')
.slice(9, 18)"
:key="number"
>
{{ number }}
</td>
<td :class="cellReport">
{{ playerCardData.course_in_par.slice(1, 5) }}
</td>
<td :class="cellReport">
{{ playerCardData.course_total_par.slice(1, 5) }}
</td>
</tr>
<tr
v-for="(i, roundIt2) in range(1, roundsPlayed)"
:key="roundIt2"
:class="cellReport"
>
<template v-if="i === 1">
<td
:class="cellReport"
v-for="scoreRound in playerCardData.score_R1
.split(',')
.slice(10, 21)"
:key="scoreRound"
>
<span>
{{ scoreRound }}
</span>
</td>
</template>
<template v-else-if="i === 2">
<td
:class="cellReport"
v-for="scoreRound in playerCardData.score_R2
.split(',')
.slice(10, 21)"
:key="scoreRound"
>
<span>
{{ scoreRound }}
</span>
</td>
</template>
<template v-else-if="i === 3">
<td
:class="cellReport"
v-for="scoreRound in playerCardData.score_R3
.split(',')
.slice(10, 21)"
:key="scoreRound"
>
<span>
{{ scoreRound }}
</span>
</td>
</template>
<template v-else-if="i === 4">
<td
:class="cellReport"
v-for="scoreRound in playerCardData.score_R4
.split(',')
.slice(10, 21)"
:key="scoreRound"
>
<span>
{{ scoreRound }}
</span>
</td>
</template>
<template v-else-if="i === 5">
<td
:class="cellReport"
v-for="scoreRound in playerCardData.score_R5
.split(',')
.slice(10, 21)"
:key="scoreRound"
>
<span>
{{ scoreRound }}
</span>
</td>
</template>
<template v-else-if="i === 6">
<td
:class="cellReport"
v-for="scoreRound in playerCardData.score_R6
.split(',')
.slice(10, 21)"
:key="scoreRound"
>
<span>
{{ scoreRound }}
</span>
</td>
</template>
<template v-else-if="i === 7">
<td
:class="cellReport"
v-for="scoreRound in playerCardData.score_R7
.split(',')
.slice(10, 21)"
:key="scoreRound"
>
<span>
{{ scoreRound }}
</span>
</td>
</template>
</tr>
</tbody>
</table>
</b-col>
</b-row>
</tr>
</template>
</tbody>
<tbody v-else>
<tr v-for="(scores, index) in scores" :key="index">
<td :class="cell">
{{ scores.pos }}
</td>
<td :class="{ up: scores.posChang === 'up', down: scores.posChang === 'down' }" >
{{ scores.name }}
</td>
<td :class="cell" :title="scores.nationality">
<span>
<img
:class="flag"
:src="
('https://assets.ocs-sport.com/flags/svg/flag_' +
scores.nationality)
| lowercase
"
/>
</span>
</td>
<td v-if="scores.vspar < 0" :class="[cell, up]">
{{ scores.vspar }}
</td>
<td v-else-if="scores.vspar > 0" :class='[cell, down]'>
{{scores.vspar}}
</td>
<td v-else :class="cell">
{{scores.vspar}}
</td>
<td v-if="scores.vspar < 0" :class="[cell, up]">
{{ scores.score }}
</td>
<td v-else-if="scores.vspar > 0" :class='[cell, down]'>
{{scores.score}}
</td>
<td v-else :class="cell">
{{scores.score}}
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "rScore",
props: ["data", "home", "scores"],
data() {
return {
cell: "cell",
cellReport: "cellReport",
flag: "flag",
title: "title",
tableRow: "tableRow",
clickedRow: -1,
courseData: this.data,
cardID: [],
playerCardData: [],
id: this.$route.query.id,
code: this.$route.query.code,
up:'up',
down:'down'
};
},
methods: {
range: function(start, end) {
if (this.roundsPlayed === 1) return this.roundsPlayed;
else
return Array(end - start + 1)
.fill()
.map((_, idx) => start + idx);
},
rowClicked: function(index) {
this.clickedRow = index;
},
playerCard: function(event) {
var cardID = event.target.getAttribute("title");
return (
(this.cardID = cardID),
axios
.get(
" url" +
this.id +
"/" +
this.id +
"-" +
this.code +
"-cards-" +
this.cardID +
".json?randomadd=1613462964358"
)
.then((response) => (this.playerCardData = response.data))
);
},
},
watch: {
scores: {
immediate: true,
handler (newValue, oldValue) {
console.log(newValue)
console.log(oldValue)
newValue.forEach(newValue, function (value1, key1) {
oldValue.forEach(oldValue, function (value2, key2) {
if (value1.id === value2.id) {
if (key1 < key2) {
value1.posChang = 'up';
} else if (key1 > key2) {
value1.posChang = 'down';
}
}
});
});
},
deep: true
}
},
computed: {
roundsPlayed() {
return this.data.rounds_played;
},
},
filters: {
lowercase: function(value) {
if (!value) {
return "";
}
return value.toLowerCase() + ".svg";
},
},
};
</script>
<style scoped>
.cell {
width: 10%;
text-align: center;
}
.cellReport {
width: 10%;
text-align: center;
}
.tableRow {
width: 100%;
}
.flag {
width: 7%;
}
.row {
padding-top: 10%;
padding-bottom: 10%;
width: 405%;
padding-left: 20%;
background-color: white;
}
.col {
padding-left: 0;
padding-right: 0;
}
.title {
text-align: center;
background-color: #263056;
color: white;
}
.titleReport {
background-color: #1b509b !important;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
.up{
color: #A52A2A;
}
.down{
color: #1E90FF;
}
</style>
Remove this. from newValue and oldValue
Took Mi-Creativity code pen above and modified as it was making everyone the same
this now works perfect. thanks for the help
watch: {
score: {
immediate: true,
handler(newValue, oldValue) {
newValue.forEach((value1, key1) => {
oldValue.forEach((value2, key2) => {
if (value1.id === value2.id) {
if(key1 < key2){
value1.posChang = 'up';
} else if (key1 > key2) {
value1.posChang = 'down';
}
}
});
});
console.log(newValue);
},
deep: true,
},
},
I'd like to add a custom filter on my angularJS app. I want di strike text like this way if the object in the ng-repat has the isDeleted flag set as true. Code: here the HTML:
<table id="tableText" class="table table-hover table-striped" ng-init="allNews()">
<tr>
<th>Titolo</th>
<th>Text</th>
<th>Disattivato</th>
<th>Modifica</th>
<th ng-if="!cancelDelete">Elimina</th>
<th ng-if="cancelDelete">Annulla</th>
</tr>
<tr ng-repeat="news in allNews | filter: deleteTitleText(news)">
<td>
<div ng-hide="editingData[news.id]">{{ news.title }}</div>
<div ng-show="editingData[news.id]"><input type="text" class="form-control" ng-model="news.title" /></div>
</td>
<td>
<div ng-hide="editingData[news.id]">{{ news.arg }}</div>
<div ng-show="editingData[news.id]"><input type="text" class="form-control" ng-model="news.arg" /></div>
</td>
<td>
<div ng-hide="editingData[news.id]"><input type="checkbox" disabled ng-model="news.isDeleted"></div>
<div ng-show="editingData[news.id]"><input type="checkbox" ng-model="news.isDeleted"></div>
</td>
<td>
<div ng-hide="editingData[news.id]"><button id="modify" class="btn btn-primary" ng-click="modify(news, $event)">Modifica</button></div>
<div ng-show="editingData[news.id]"><button id="accept" class="btn btn-success" ng-click="update(news)">Accetta</button></div>
</td>
<td>
<div ng-hide="editingData[news.id]"><button id="delete" class="btn btn-danger" ng-click="delete(news.id)">Cancella</button></div>
<div ng-show="editingData[news.id]"><button id="cancel" class="btn btn-danger" ng-click="cancelModify()">Annulla</button></div>
</td>
</tr>
</table>
The JS:
app.filter('deleteTitleText', function () {
return function (news) {
if (news.isDeleted == true) {
news.title = "<span><del>" + news.title + "</del></span>";
news.arg = "<span><del>" + news.arg + "</del></span>";
}
return news;
}
});
This is a good way to implement this kind of filter? For now I receive this error: angular.js:13920 Error: [filter:notarray] Expected array but received: function (). Thanks
OPTION 1:
<table id="tableText" class="table table-hover table-striped" ng-init="allNews()">
<tr>
<th>Titolo</th>
<th>Text</th>
<th>Disattivato</th>
<th>Modifica</th>
<th ng-if="!cancelDelete">Elimina</th>
<th ng-if="cancelDelete">Annulla</th>
</tr>
<tr ng-repeat="news in allNews">
<td>
<div ng-hide="editingData[news.id]">
<span ng-hide="news.isDeleted">{{ news.title }}</span>
<span ng-show="news.isDeleted"><del>{{ news.title }}</del></span>
<!-- USING ng-if -->
<!--
<span ng-if="!news.isDeleted">{{ news.title }}</span>
<span ng-if="news.isDeleted"><del>{{ news.title }}</del></span>
-->
</div>
<div ng-show="editingData[news.id]"><input type="text" class="form-control" ng-model="news.title" /></div>
</td>
<td>
<div ng-hide="editingData[news.id]">
<span ng-hide="news.isDeleted">{{ news.arg }}</span>
<span ng-show="news.isDeleted"><del>{{ news.arg }}</del></span>
<!-- USING ng-if -->
<!--
<span ng-if="!news.isDeleted">{{ news.arg }}</span>
<span ng-if="news.isDeleted"><del>{{ news.arg }}</del></span>
-->
</div>
<div ng-show="editingData[news.id]"><input type="text" class="form-control" ng-model="news.arg" /></div>
</td>
<td>
<div ng-hide="editingData[news.id]"><input type="checkbox" disabled ng-model="news.isDeleted"></div>
<div ng-show="editingData[news.id]"><input type="checkbox" ng-model="news.isDeleted"></div>
</td>
<td>
<div ng-hide="editingData[news.id]"><button id="modify" class="btn btn-primary" ng-click="modify(news, $event)">Modifica</button></div>
<div ng-show="editingData[news.id]"><button id="accept" class="btn btn-success" ng-click="update(news)">Accetta</button></div>
</td>
<td>
<div ng-hide="editingData[news.id]"><button id="delete" class="btn btn-danger" ng-click="delete(news.id)">Cancella</button></div>
<div ng-show="editingData[news.id]"><button id="cancel" class="btn btn-danger" ng-click="cancelModify()">Annulla</button></div>
</td>
</tr>
</table>
OPTION 2:
<span ng-bind-html="news | deleteTitleText"></span>
app.filter('deleteTitleText', function ($sce) {
return function (input) {
if(input.isDeleted) {
output = $sce.trustAsHtml("<del>"+input.title+"</del>");
} else {
output = $sce.trustAsHtml("<span>"+input.title+"</span>");
}
return output;
};
});
remove filter from ng-repeat <tr ng-repeat="news in allNews">
So final would be similar to :
<tr ng-repeat="news in allNews">
<td>
<div ng-hide="editingData[news.id]">
<span ng-bind-html="news | deleteTitleText"></span>
</div>
<div ng-show="editingData[news.id]"><input type="text" class="form-control" ng-model="news.title" /></div>
</td>
....
....
Hope this helps
You need to alter you filter to expect the entire allNews array/object and work with that instead of just a single item in the list.
This might help.
For instance:
app.filter('deleteTitleText', function () {
return function (allNews) {
var filtered = [];
angular.forEach(allNews, function(news) {
if (news.isDeleted == true) {
news.title = "<span><del>" + news.title + "</del></span>";
news.arg = "<span><del>" + news.arg + "</del></span>";
}
filtered.push(news);
});
return filtered;
}
});
Your ng-repeat should be changed from:
ng-repeat="news in allNews | filter: deleteTitleText(news)"
To:
ng-repeat="news in allNews | deleteTitleText"
Try to use ng-style, like in this plunker: https://plnkr.co/edit/0koMSQ54gUChdpB4Vrrm?p=preview
!item.isDisabled ? {'text-decoration': 'line-through'} : {'text-decoration': 'none'}
You can simply use ng-show and ng-hide
<tr ng-repeat="news in allNews">
<span ng-show="news.isDeleted"><del>{{news.title}}</del></span>
<span ng-show="news.isDeleted"><del>{{news.arg}}</del></span>
<span ng-hide="news.isDeleted"><del>{{news.title}}</del></span>
<span ng-hide="news.isDeleted"><del>{{news.arg}}</del></span>
.
.
.
</tr>
I am trying to upload an image from my html an on click of save button, i am calling an upload function in the controller. When i enter the upload function in controller, i am not able to access $scope to check the $scope.file.name.
//upload image.html
<div class="horizontal">
<table border=1 frame=void rules=rows class="ui celled table" >
<thead style="text-align: center;">
<tr>
<th> Id </th>
<th> Question </th>
<th> Option A </th>
<th> Option B </th>
<th> Option C </th>
<th> Option D </th>
<th> Answer </th>
<th> Section id </th>
<th> Image </th>
<th> Edit</th>
</tr></thead>
<tbody ng-repeat="ques in questionObj | filter: searchText" style="text-align: center;">
<tr>
<td>{{$index + 1}}</td>
<td><span ng-show="editEnabled" ng-model="Title">
{{ ques.Title || 'empty' }}
</span>
<div ng-hide="editEnabled">
<textarea ng-model="ques.Title"></textarea>
</div>
</td>
<td><span ng-show="editEnabled" ng-model="Title">{{ques.Option_a || 'empty'}} </span>
<div ng-hide="editEnabled" class="option">
<textarea ng-model="ques.Option_a"></textarea>
</div>
</td>
<td><span ng-show="editEnabled" ng-model="Title">{{ques.Option_b || 'empty'}} </span>
<div ng-hide="editEnabled" class="option">
<textarea ng-model="ques.Option_b"></textarea>
</div>
</td>
<td><span ng-show="editEnabled" ng-model="Title">{{ques.Option_c || 'empty'}} </span>
<div ng-hide="editEnabled" class="option">
<textarea ng-model="ques.Option_c"></textarea>
</div>
</td>
<td><span ng-show="editEnabled" ng-model="Title">{{ques.Option_d || 'empty'}} </span>
<div ng-hide="editEnabled" class="option">
<textarea ng-model="ques.Option_d"></textarea>
</div>
</td>
<td><span ng-show="editEnabled" ng-model="Title">{{ques.Answer || 'empty'}} </span>
<div ng-hide="editEnabled" class="option">
<textarea ng-model="ques.Answer"></textarea>
</div>
</td>
<td><span ng-show="editEnabled" ng-model="Title">{{ques.Section_id || 'empty'}} </span>
<div ng-hide="editEnabled" class="option">
<input type="text" ng-model="ques.Section_id"></input>
</div>
</td>
<td>
<span ng-if="ques.Image != 'nil'" ng-show="editEnabled" ng-model="Title"> <img ng-src="{{ques.Image}}" class="image-container" /></span>
<span ng-if="ques.Image === 'nil'" ng-show="editEnabled" ng-model="Title">No Image</span>
<div ng-if="ques.Image != 'nil'" ng-hide="editEnabled" class="option">
<img ng-src="{{ques.Image}} " class="image-container" />
</div>
<div ng-if="ques.Image === 'nil'" ng-hide="editEnabled" class="option">
<input class="bottom-marg-15" type="file" name="file" file onchange="angular.element(this).scope().imageLoad(this)"></input>
<!-- Progress Bar -->
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="{{ uploadProgress }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ uploadProgress }}%;">
{{ uploadProgress == 0 ? '' : uploadProgress + '%' }}
</div>
</div>
<div ng-repeat="step in stepsModel">
<img class="small-thumb" ng-src="{{step}}" />
</div>
</div>
</td>
<td style="white-space: nowrap">
<div class="buttons" ng-show="editEnabled" ng-show="editEnabled">
<button class="btn btn-primary" ng-click="editEnabled = !editEnabled">edit</button>
<button class="btn btn-danger" ng-click="question.removeUser($index,ques.Id)">del</button>
</div>
<div ng-hide="editEnabled" class="form-buttons form-inline">
<button ng-model="Title" ng-disabled="editQuestionForm.$waiting" ng-click=" upload(); editEnabled = !editEnabled" class="btn btn-primary">
save
</button>
<button type="button" ng-click="editEnabled = !editEnabled" class="btn btn-default">
cancel
</button>
</div>
</td>
</tr>
</tbody>
this is the controller which has the upload function. I am not able to access $scope inside upload function.
'use strict';
angular.module('onlineTestAngularApp')
.controller('editQuestionCtrl', function($scope, GetQuestionsService, $window, $location, localStorageService, ENV) {
var vm = this;
vm.success = false;
vm.auth_token = localStorageService.get('rec-auth-token');
vm.role = localStorageService.get('role');
$scope.editEnabled = true;
$scope.access_key = ENV.access_key;
$scope.secret_key = ENV.secret_key;
$scope.bucket = "q-auth/angular_test/";
$scope.stepsModel = [];
$scope.imageLoad = function(element){
var reader = new FileReader();
reader.onload = $scope.imageIsLoaded;
reader.readAsDataURL(element.files[0]);
}
$scope.imageIsLoaded = function(e){
$scope.$apply(function() {
$scope.stepsModel.push(e.target.result);
});
}
$scope.upload = function($scope){
console.log("inside upload");
}
});
Your upload() is having a parameter called $scope, remove it.
Change:
$scope.upload = function($scope){
console.log("inside upload");
}
To:
$scope.upload = function(){
console.log("inside upload");
};
Because when you call the function upload() it will expect to pass an argument, $scope in the function is taken as local variable of that function, hence becoming undefined.
Once you enter the controller's function you have access to its $scope. There's no need to pass it as a parameter:
Controller
$scope.upload = function() {
console.log($scope.stepsModel) // or any other property
}
It seems you mix two techniques for accessing controller's scope: vm and $scope. My advice is to use vm only for exposing the controller variables to the view. Using $scope will soon be deprecated and I use it mainly for $watching changes in the view.
When I click my headers, it does not sort and the table disappears
angular.module('maniaApp')
.controller('EventCtrl', function ($scope,$location,$http) {
$scope.sortType = '_source.event_name'; // set the default sort type
$scope.sortReverse = false; // set the default sort order
$scope.searchEvent = ''; // set the default search/filter term
var url = "http://api.loc/events/get-events";
$http.get(url).success(function api(data, status, headers, config){
$scope.events = data;
}).error(function api(data, status, headers, config){
console.error(data, status, headers, config);
});
here is my html
<div class="container">
<!--<div ng-view=""></div>-->
<div ng-controller="EventCtrl">
<div class="alert alert-info">
<p>Sort Type: {{ sortType }}</p>
<p>Sort Reverse: {{ sortReverse }}</p>
<p>Search Query: {{ searchEvent }}</p>
</div>
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" class="form-control" placeholder="Search events" ng-model="searchEvent">
</div>
</div>
</form>
<table class="table table-bordered table-striped">
<thead>
<tr>
<td>
<a href="#" ng-click="sortType = '_source.id'; sortReverse = !sortReverse">
Id
<span ng-show="sortType == '_source.id';" class="fa fa-caret-down"></span>
</a>
</td>
<td>
<a href="#" ng-click="sortType = '_source.event_name'; sortReverse = !sortReverse">
<span ng-show="sortType == '_source.event_name';" class="fa fa-caret-down"></span>
Event Name
</a>
</td>
<td>
<a href="#" ng-click="sortType = '_source.event_status_id'; sortReverse = !sortReverse">
<span ng-show="sortType == '_source.event_sid'" class="fa fa-caret-down"></span>
Event Status
</a>
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="event in events | orderBy:sortType:sortReverse | filter:searchEvent">
<td>{{ event._source.event_id }}</td>
<td>{{ event._source.event_name }}</td>
<td>{{ event._source.event_sid }}</td>
</tr>
</tbody>
</table>
</div>
</div>
I have below HTML panel and binds to the controller, in the controller I have 4 calls to server to get my data, my question is how can I show spinner or overlay on top of this panel until all the requests to the server are resolved and I can show the data smoothly.
<div class="container-fluid margin10 padding10 myPanel">
<div class="row-fluid name" ng-bind-html="viewData.msg.name"></div>
<div class="row">
<div class="col-md-11">
<div ng-bind-html="'• ' + (viewData.msg.filtersStr | limitTo: 140) + (viewData.msg.filtersStr.length > 140 ? '...' : '')" ng-attr-title="{{viewData.msg.filtersTooltipStr}}"></div>
</div>
</div>
<div class="row top-buffer-margin">
<div class="col-md-4 text-right">
<div class="col-md-8"><span class="font10" translate="msgs.details.confidence"></span>:</div>
<span ng-bind-html="viewData.msg.severity" ng-class="viewData.msg.severityColor" class="font10 col-md-4 confidence-span"></span>
</div>
</div>
<hr>
<table class="table-striped col-md-12 top-buffer-margin">
<thead>
<tr>
<th class="col-md-3"></th>
<th class="col-md-2 text-center" ng-bind-html="'<i>' + ('msgs.details.countColHead' | translate) + '<i>'"></th>
<th class="col-md-4 text-center" ng-bind-html="'<i>' + ('msgs.details.dynamicCalculation' | translate) + '<i>'"></th>
<th class="col-md-3 text-right" ng-bind-html="'<i>' + ('msgs.details.CalculationColHead' | translate) + '<i>'"></th>
</tr>
</thead>
<tbody>
<tr class="">
<td class="col-md-3">
<div><span translate="msgs.details.number1"></span></div>
</td>
<td class="col-md-2 text-center">
<span ng-bind="viewData.msg.number1.dynamicCount "></span>
</td>
<td class="col-md-4 text-center" >
<span ng-bind="viewData.msg.number1.dynamicCalculation "></span>
</td>
<td class="col-md-3 text-right"
ng-bind="(viewData.msg.number1.percentageCalculation > 0 ? '+' : '') + viewData.msg.number1.percentageCalculation + '%'">
</td>
</tr>
<tr class="">
<td class="col-md-3">
<div><span translate="msgs.details.number2"></span></div>
</td>
<td class="col-md-2 text-center">
<span ng-bind="viewData.msg.number2.dynamicCount "></span>
</td>
<td class="col-md-4 text-center">
<span ng-bind="viewData.msg.number2.dynamicCalculation "></span>
</td>
<td class="col-md-3 text-right"
ng-bind="(viewData.msg.number2.percentageCalculation > 0 ? '+' : '') + viewData.msg.number2.percentageCalculation + '%'">
</td>
</tr>
<tr class="">
<td class="col-md-3">
<div><span translate="msgs.details.number3"></span></div>
</td>
<td class="col-md-2 text-center">
<span ng-bind="viewData.msg.number3.dynamicCount "></span>
</td>
<td class="col-md-4 text-center">
<span ng-bind="viewData.msg.number3.dynamicCalculation "></span>
</td>
<td class="col-md-3 text-right"
ng-bind="(viewata.msg.number3.percentageCalculation > 0 ? '+' : '') + viewData.msg.number3.percentageCalculation + '%'">
</td>
</tr>
</tbody>
</table>
</div>
The controller is like this:
(function() {
'use strict';
angular.module('myApp')
.controller('myController', myController);
/** #ngInject */
function myController($scope, BinsResource, msgEvents, appConstants) {
var msg = null;
$scope.viewData = {msg: {}};
var init = function() {
}
var getMsgDetails = function() {
msg = $scope.selectedMsg;
//
$scope.viewData.msg = {
ruleName: msg.ruleName,
date: moment.utc(msg.time).format('YYYY-MM-DD'),
time: moment.utc(msg.time).format('HH:mm'),
severity: msg.severity,
severityColor: msgsService.getSeverityClassColor(msg.severity, appConstants),
number1: buildEventsData(msg, appConstants.measureType.number1),
number2: buildEventsData(msg, appConstants.measureType.number2),
number3: buildEventsData(msg, appConstants.measureType.number3)
};
var params = prepareDataForBinsHttp(msg);
//number1
BinsResource.post('number1', params).then(
function(response) {
var calculationObject = calculateCalculation(response.data.Interval, msg);
$scope.viewData.msg.number1.dynamicCalculation = calculationObject.calculation;
$scope.viewData.msg.number1.dynamicCount = calculationObject.count;
},
function(error) {
//TODO : Display callback error
}
);
//number2
BinsResource.post('number2', params).then(
function(response) {
var calculationObject = calculateCalculation(response.data.Interval, msg);
$scope.viewData.msg.number2.dynamicCalculation = calculationObject.calculation;
$scope.viewData.msg.number2.dynamicCount = calculationObject.count;
},
function(error) {
//TODO : Display callback error
}
);
//number3
BinsResource.post('number3', params).then(
function(response) {
var calculationObject = calculateCalculation(response.data.Interval, msg);
$scope.viewData.msg.number3.dynamicCalculation = calculationObject.calculation;
$scope.viewData.msg.number3.dynamicCount = calculationObject.count;
},
function(error) {
//TODO : Display callback error
}
);
}
//
$scope.subscribe(msgEvents.message._ALERT_ITEM_SELECTED_, function(selectedMsg){
$scope.selectedMsg = selectedMsg;
if(selectedMsg != null){
getMsgDetails();
}
});
init();
};
})();
I want my HTML be blocked until getMsgDetails() does all its calls to server and calculation and was ready to populate the HTML, how can I do this?
I think your best option, is to use the following angular library
https://github.com/McNull/angular-block-ui
It will display a spinner, or a loading message, until all the promises are solved (it is configurable as well)
Demo here:
http://angular-block-ui.nullest.com/#!/