EDIT: Following previous answers the JS has been amended to run all the code within the http.get. I have also added the HTML.
The current page can be viewed at: http://www.kamac.co.uk/wordplay3/#/gamecontrol
I have an AngularJS app with the following code in the controller:
var vm = this;
$http.get('data/data.json').success(function(data) {
$scope.entries = data;
var rand = Math.floor(Math.random()*$scope.entries.length);
$scope.selectedWord = $scope.entries[rand].word;
$scope.selectedDefinition = $scope.entries[rand].definition;
vm.topsecret = "TopSecret";
vm.letter = [];
vm.checkLetter = function(index){
if(vm.topsecret[index] === vm.letter[index]){
vm.result = "letter was correct"
} else {
vm.letter[index] = "";
vm.result = "nope";
}
}
Both parts of the code do as expected. The $http.get function reads a JSON file and sets $scope.selectedWord to a randomly chosen word.
The second part creates a number of input boxes for each letter in the word saved in vm.topsecret.
My problem is this only works if vm.topsecret is hard coded. How can I get vm.letter to equal $scope.selectedWord ?
I have tried the obvious: vm.topsecret = $scope.selectedWord but this results in an empty value.
HTML
<section class="spellbound container-fluid">
<div class="jumbotron">
<h1>SpellBound</h2>
<p>Below you will see a definition of one of the words in the dictionary. Enter a correct letter and the square turns green - enter a wrong letter and it turns red.</p>
</div>
<div class="panel panel-info">
<div class="panel-heading">How do you spell the word that means</div>
<div class="panel-body">{{selectedDefinition}}</div>
</div>
<p>Answer: {{selectedWord}}</p>
<p>VM: <span>{{vm.topsecret}}</span>
<div ng-controller="GamecontrolController as vm">
<input type="text" ng-model="vm.letter[$index]" ng-repeat="letter in vm.topsecret track by $index" ng-change="vm.checkLetter($index)"/>
<p><span>{{vm.result}}</span></p>
</div>
<div>
<a ng-click="reloadPage()" class="btn btn-info btn-lg" role="button">Play Again</a>
Back To Menu
</div>
Try moving vm.topsecret like below:
var vm = this;
$http.get('data/data.json').success(function(data) {
$scope.entries = data;
var rand = Math.floor(Math.random()*$scope.entries.length);
$scope.selectedWord = $scope.entries[rand].word;
$scope.selectedDefinition = $scope.entries[rand].definition;
vm.topsecret = $scope.selectedWord;
});
vm.letter = [];
vm.checkLetter = function(index){
if(vm.topsecret[index] === vm.letter[index]){
vm.result = "letter was correct"
} else {
vm.letter[index] = "";
vm.result = "nope";
}
}
This is just a guess since I cannot see your HTML and how you are using vm.topsecret.
Related
I am trying to make a news object and in that section in which there are separate sub-section so it will look like this. user can add and remove subsection.
and when I press the save button it should send the data as following json structure seperating each subsection by ||.
{"news": {
"section1": ["ABCDE||FGHI||JKLM"],
"section2": ["NOPQ"],
"section3": ["RSTU"]
}
}
and when use save the data it should get saved and when the user open that page again it should be as last saved.
This is what I have tried so far.
I have tried to make a div and then wrap test area in it in ng-repeat but it seems like it should be it a table.
// For adding the subsection
$scope.section1 = [];
$scope.addsection1=function(){
$scope.section1.push({});
}
// For removing the subsection
$scope.removesection1 = function(id){
var indexToRemove;
for(i = 0; i < $scope.section1.length; i++){
if($scope.section1[i].id === id){
indexToRemove = i;
}
$scope.section1.splice(indexToRemove, 1);
}
}
<div class="section-div flex-column">
<div class="flex-row">
<h4 style="flex-grow: 2;">New Updates</h4>
<button class="add-btn" ng-click="addsection1()">+Add field</button>
</div>
<textarea ng-repeat="section in section1"
style="margin: 7px;border: 1px solid #00000047;border-radius: 4px;"
name="" id="">
</textarea>
</div>
Please help me I m a beginner in the angularjs. Thanks in advance.
send the data as following json structure seperating each subsection by ||
One approach is to use array.join:
var arr = ["ABCDE", "FGHI", "JKLM"];
var obj = { news: { section1: [arr.join("||")] } };
console.log(obj);
Conversely, to receive, use string.split:
var obj = { news: { section1: ["ABCDE||FGHI||JKLM"] } };
var arr = obj.news.section1[0].split("||");
console.log(arr);
I have offers table and users table on parse server. I did a query for he offers table and it worked great (both console log and html - I had issues with async and the Q.promise helped). Now I'm trying to add two elements that are in the users table. I get it on the console, but not on the page. Here is what I have on the offers.service:
this.getAllOffers = function () {
var Q = $q.defer();
console.log('getAllOffers called');
//all offers filter is selected
this.allOffersFilter = false;
var offers = Parse.Object.extend("Offer");
var exchanges = Parse.Object.extend("Exchanges");
var users = Parse.Object.extend("User");
var query = new Parse.Query(offers);
var userQuery = new Parse.Query(users);
var results = [];
query.descending("createdAt");
query.limit(4);
userQuery.find().then(function(users) {
for (i = 0; i < users.length; i++) {
foundUsers = users[i];
query.find().then( function(offers){
for(i = 0; i < offers.length; i++){
found = offers[i];
var result = {};
result.date = found.get("createdAt");
result.price = found.get("price");
result.status = found.get("accepted");
result.lastName = foundUsers.get("lastName");
result.companyName = foundUsers.get("companyName");
console.log(result.companyName);
console.log(result.price);
}
});
results.push(result);
}
Q.resolve(results);
});
return Q.promise;
};
Then my HTML:
<!--List of offers-->
<div class="col-md-3">
<h4>List of offers</h4>
<div ng-if="offersList">
<div ng-repeat="offer in offersList">
<div class="offer card">
<div>{{offer.username}}</div>
<div>{{offer.companyName}}</div>
<div>{{offer.date}}</div>
<div>{{offer.price}}</div>
<div>{{offer.status}}</div>
</div>
</div>
</div>
<div ng-if="!(offersList)">There are no offers</div>
</div>
Then my component:
angular.module('offersPage')
.component('offersPage', {
templateUrl: 'pages/offers-page/offers-page.template.html',
controller: function(AuthService, PageService, OffersService,
$scope) {
// Functions for offers-page
// Check if user is logged in and verified on page load
AuthService.userLoggedin(function(loggedIn, verified) {
if(!verified) {
PageService.redirect('login');
}
});
this.$onInit = function() {
OffersService.getAllOffers().then(function(offersList) {
$scope.offersList = offersList;
});
}
}
});
THANKS IN ADVANCE !
You are resolving $q before results is populated, so, you list is empty.
I don't know about Parse server, but if userQuery.find().then is async, then need to move Q.resolve(results); inside it, or probably inside query.find().then.
When you do an ng-if in angularjs it literally takes out the element and when it puts it in it is as a child scope. To fix this you need to make sure and put $parent on any child element inside an ng-if. See below. Make sure to use track by $index to when you are doing repeats its good practice. Also notice you dont need to $parent anything in the repeat since it is referencing offerwhich is defined.
Code:
<div ng-if="offersList">
<div ng-repeat="offer in $parent.offersList track by $index">
<div class="offer card">
<div>{{offer.username}}</div>
<div>{{offer.companyName}}</div>
<div>{{offer.date}}</div>
<div>{{offer.price}}</div>
<div>{{offer.status}}</div>
</div>
</div>
</div>
I'm unable to push objects to an array and i can't figure out why. At the moment, the result (records) repeats the last instance of the each loop.
JSFiddle
HTML
<div data-provider="prv1"></div>
<div data-rating="rtn1"></div>
<div data-price="prc1"></div>
<div data-provider="prv2"></div>
<div data-rating="rtn2"></div>
<div data-price="prc2"></div>
<div data-provider="prv3"></div>
<div data-rating="rtn3"></div>
<div data-price="prc3"></div>
<div data-provider="prv4"></div>
<div data-rating="rtn4"></div>
<div data-price="prc4"></div>
Javascript (w/ jQuery)
(function(){
var sort = $(".sort select");
var provider = $("[data-provider]");
var rating = $("[data-rating]");
var price = $("[data-price]");
var records = [];
var record = {};
$(provider).each(function(index, value){
record.provider = $(provider).eq(index).data("provider");
record.rating = $(rating).eq(index).data("rating");
record.price = $(price).eq(index).data("price");
records[index] = record;
});
})();
In your loop you set each index to be equal to record. Since the scope of record is the anonymous function, it will be the same object for each index.
What you want is for the scope to be the function provided to .each
Like this fiddle
$(provider).each(function(index, value){
var record = {};
...
});
I am trying to retrieve values from the url and displaying it in my web page using angular JS. what i am doing is
1) saving the entire url to a variable and split it so that i can filter to the value i need.
2) However when there is a space it is shown as %20. i want this %20 to be displayed as space itself.
Example : john doe is shown as john%20doe
Controller
function InboxController($scope, $http, $cookieStore, $location) {
$scope.single_mail = function()
{
var url = $location.url();
var split_url = url.split('=');
var mess_id = split_url[1];
var from = split_url[2];
var id_value = mess_id.split('&');
var inbox_id = id_value[0];
var from_value = from.split('&');
$scope.inbox_from = from_value[0];
$scope.single_message = [];
$scope.single_message = [];
var single_inbox_mail ="https://phoe.manage.com/app/inbox/message.html?contactid="+conId+"&token="+token+"&id="+inbox_id;
$http.get(single_inbox_mail).success(function(response) {
$scope.single_message = response[0];
});
HTML view
<div class="page" data-ng-controller="InboxController">
<div class="row" ng-init="single_mail()">
<div class="mail-header row">
<div class="col-md-8">
<h3>{{single_message.subject}}</h3>
<h4>From : <strong>{{inbox_from}}</strong></h4>
</div>
</div>
<div class="mail-content">
<p>{{single_message.body}}</p>
</div>
</div>
</div>
this is encoded url part, you should use decodeURIComponent() function and pass encoded string in first param, see sample code
decodeURIComponent("john%20doe");
//> john doe
try this using javascript component
var url = decodeURIComponent($location.url());
I am sure this has been asked before but I cannot find the answer.
I have an AngularJS script that is pulling from a DB and then rendering to content. Everything is working correctly except a couple of places that I am trying to concatenate some words with new lines between them.
**in the script.js**
groupedList[aIndex].CATEGORY = existingCategory+'\n'+thisCategory;
groupedList[aIndex].CATEGORY = existingCategory+'<br>'+thisCategory;
If I use the first line of the above code I don't see anything but there is not a new line in the redered html. If I use the second line the <br> get rendered as text and the output looks like this:
Instinct<br>Media
instead of
Instinct
Media
I can post the full script if that would be helpful but I am guessing there is something simple that I am just not seeing.
UPDATE
Here is the full js
function qCtrl($scope, $filter, $http, $timeout){
$scope.getCategories = function(){$http.post('quote.cfc?method=getCategories').success(function(data) { $scope.categories = data; }); }
$scope.getClassifications = function(){$http.post('quote.cfc?method=getClassifications').success(function(data) { $scope.classifications = data; }); }
$scope.getIndustries = function(){$http.post('quote.cfc?method=getIndustries').success(function(data) { $scope.industries = data; }); }
$scope.getKeywords = function(){$http.post('quote.cfc?method=getKeywords').success(function(data) { $scope.keywords = data; }); }
$scope.getSources = function(){$http.post('quote.cfc?method=getSources').success(function(data) { $scope.sources = data; }); }
$scope.getAllQuotes = function(){$http.post('quote.cfc?method=getAllQuotesJoined').success(function(data) { $scope.allQuotes = data; }); }
$scope.initScopes = function (){
$scope.getCategories();
$scope.getClassifications();
$scope.getIndustries();
$scope.getKeywords();
$scope.getSources();
$scope.getAllQuotes();
}
$scope.initScopes();
// SEARCH QUOTES
$scope.filteredQuotes = $scope.allQuotes;
$scope.search = {searchField:''};
$scope.searchQuote = function(){
var filter = $filter('filter');
var searchCrit = $scope.search;
var newlist = $scope.allQuotes;
var groupedList = [];
var idList = [];
newlist = filter(newlist,{TESTQUOTE:searchCrit.searchField});
for(i=0;i<10;i++){
aIndex = idList.contains(newlist[i].TESTIMONIALID);
if(aIndex >= 0){
thisKeyword = newlist[i].KEYWORD;
thisClassification = newlist[i].CLASSIFICATION;
thisCategory = newlist[i].CATEGORY;
existingKeyword = groupedList[aIndex].KEYWORD;
existingClassification = groupedList[aIndex].CLASSIFICATION;
existingCategory = groupedList[aIndex].CATEGORY;
if(thisKeyword != '' && existingKeyword.indexOf(thisKeyword) == -1){
groupedList[aIndex].KEYWORD = existingKeyword+' - '+thisKeyword;
}
if(thisClassification != '' && existingClassification.indexOf(thisClassification) == -1){
groupedList[aIndex].CLASSIFICATION = existingClassification+' \n '+thisClassification;
}
if(thisCategory != '' && existingCategory.indexOf(thisCategory) == -1){
groupedList[aIndex].CATEGORY = existingCategory+'<br>'+thisCategory;
}
} else {
idList.push(newlist[i].TESTIMONIALID);
groupedList.push(newlist[i]);
}
}
$scope.filteredQuotes = groupedList;
}
}
Array.prototype.contains = function ( needle ) {
for (j in this) {
if (this[j] == needle) return j;
}
return -1;
}
Here is the HTML
<div ng-repeat="q in filteredQuotes" class="well clearfix">
<h3>{{q.TITLE}}</h3>
<div class="row-fluid" style="margin-bottom:5px;">
<div class="span3 well-small whBG"><h4>Classification</h4>{{q.CLASSIFICATION}}</div>
<div class="span3 well-small whBG pipeHolder"><h4>Categories</h4>{{q.CATEGORY}}</div>
<div class="span3 well-small whBG"><h4>Key Words</h4>{{q.KEYWORD}}</div>
<div class="span3 well-small whBG"><h4>Additional</h4>Industry = {{q.INDUSTRY}}<br>Source = {{q.SOURCE}}</div>
</div>
<div class="well whBG">{{q.TESTQUOTE}}</div>
<div class="tiny">
Source comment : {{q.SOURCECOMMENT}}<br>
Additional Comment : {{q.COMMENT}}
</div>
</div>
</div>
You can use \n to concatenate words and then apply this style to container div.
style="white-space: pre;"
More info can be found at https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
<p style="white-space: pre;">
This is normal text.
</p>
<p style="white-space: pre;">
This
text
contains
new lines.
</p>
I could be wrong because I've never used Angular, but I believe you are probably using ng-bind, which will create just a TextNode.
You will want to use ng-bind-html instead.
http://docs.angularjs.org/api/ngSanitize.directive:ngBindHtml
Update: It looks like you'll need to use ng-bind-html-unsafe='q.category'
http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe
Here's a demo:
http://jsfiddle.net/VFVMv/
You need to either use ng-bind-html-unsafe ... or you need to include the ngSanitize module and use ng-bind-html:
with ng-bind-html-unsafe
Use this if you trust the source of the HTML you're rendering it will render the raw output of whatever you put into it.
<div><h4>Categories</h4><span ng-bind-html-unsafe="q.CATEGORY"></span></div>
OR with ng-bind-html
Use this if you DON'T trust the source of the HTML (i.e. it's user input). It will sanitize the html to make sure it doesn't include things like script tags or other sources of potential security risks.
Make sure you include this:
<script src="http://code.angularjs.org/1.0.4/angular-sanitize.min.js"></script>
Then reference it in your application module:
var app = angular.module('myApp', ['ngSanitize']);
THEN use it:
<div><h4>Categories</h4><span ng-bind-html="q.CATEGORY"></span></div>
Why so complicated?
I solved my problem this way simply:
<pre>{{existingCategory+thisCategory}}</pre>
It will make <br /> automatically if the string contains '\n' that contain when I was saving data from textarea.
I've used like this
function chatSearchCtrl($scope, $http,$sce) {
// some more my code
// take this
data['message'] = $sce.trustAsHtml(data['message']);
$scope.searchresults = data;
and in html I did
<p class="clsPyType clsChatBoxPadding" ng-bind-html="searchresults.message"></p>
thats it I get my <br/> tag rendered
You can also use:
String.fromCharCode(10);
with CSS
white-space: pre-line;
Here si working example:
https://jsfiddle.net/Nxja/3xtcqdej/1/