We Keep Coding

angular ng-if json array contains boolean

Angular 1 app.
Basically, there is an array of JSON object like this:
ctrl.messages =
[
{id: 1, text: 'hello1',createdBy:{name: 'Jack', hasBeenRead: false} }
,{id: 2, text: 'hello2',createdBy:{name: 'Steven', hasBeenRead: true} }
];
Now, in the view I print the messages like this:
<div ng-repeat="message in messages">
Message: {{message.text}}
</div>
Somewhere else I have this html:
<div ng-if="messages.length > 0">
<button ng-if="?">Mark all read</button>
<button ng-if="?">Mark all unread</button>
</div>
The buttons above will never be showing together. But only one of them (and only if there are messages at all).
I wonder if it possibile to add in the ng-if above (in the button) a code for understanding if the button has to be showing.
The button Mark all read will be showing only if there is at least one message marked with hasBeenRead: false.
The button Mark all unread will be showing only if all the messages have been read.
I could do this in the controller. But I thought it would be neater if I could add this directly in the view.
The difficulty for me is to access the hasBeenRead in the JSON from the view without iterating. Just asking "is there at least one unread message?".
Is there a way to do it in this way?

Create filter as below
app.filter('hasBeenRead', function () {
return function (input) {
return input.some(val => !val.createdBy.hasBeenRead);
}
});
<div ng-if="messages.length > 0">
<button ng-if="!messages|hasBeenRead">Mark all read</button>
<button ng-if="messages|hasBeenRead">Mark all unread</button>
</div>

Generating unique variables for #each in an array in order to write an upvote/downvote app

I am brand new to coding so forgive my very obvious ignorance. My question is this: How can I create a unique variable for each item in a global array in MongoDB so that I can tally upvotes and downvotes and sort accordingly. I'm doing all this in the Meteor framework.
Here's my code:
<template name="website_item">
<li>
{{title}}
<p>
{{description}}
</p>
<a href="#" class="btn btn-default js-upvote">
<span class="glyphicon glyphicon-arrow-up" aria-hidden="true"> </span>
</a>
<a href="#" class="btn btn-default js-downvote">
<span class="glyphicon glyphicon-arrow-down" aria-hidden="true"> </span>
</a>
<p>
Votes: {{totalVotes}}
</p>
</li>
</template>
Here's my client.js:
var totalVotes = 0;
Template.website_item.events({
"click .js-upvote":function(event){
// example of how you can access the id for the website in the database
// (this is the data context for the template)
var website_id = this._id;
console.log("Up voting website with id "+website_id);
// put the code in here to add a vote to a website!
totalVotes++;
console.log(totalVotes);
Websites.update({_id:website_id}, {$set: {totalVotes:totalVotes}});
return false;// prevent the button from reloading the page
},
"click .js-downvote":function(event){
// example of how you can access the id for the website in the database
// (this is the data context for the template)
var website_id = this._id;
console.log("Down voting website with id "+website_id);
// put the code in here to remove a vote from a website!
totalVotes--;
console.log(totalVotes);
Websites.update({_id:website_id}, {$set: {totalVotes:totalVotes}});
return false;// prevent the button from reloading the page
}
})
In collection.js I have:
Websites = new Mongo.Collection("websites");
and in server.js I have:
import { Meteor } from 'meteor/meteor';
Meteor.startup(() => {
// code to run on server at startup
if (!Websites.findOne()){
console.log("No websites yet. Creating starter data.");
Websites.insert({
title:"Test site",
url:"http://www.test.com",
description:"This is a test.",
createdOn:new Date(),
totalVotes: 0
});
Websites.insert({
title:"Google",
url:"http://www.google.com",
description:"Popular search engine.",
createdOn:new Date(),
totalVotes: 0
});
}
});
I hope i've been comprehensive and clear with my question. I just want to be able to save up and downvote tallies for each item in my global array but right now there's just a single variable which does nothing for me.
Thanks so much!

you're missing publish and subscribe. the idea is your template will subscribe to the website data, and the server will then publish what you're asking for. you would write a helper that performs a find() on the published data, and an #each loop that would iterate over that data.
once you're done that, the tricky part, which is what you're asking about, is to tag each loop item so that, when clicked, you can uniquely identify it in the event handlers.
let's set up a new template (i'm writing all this code just in this text box, w/o trying it, so please forgive typos):
<template name="Websites">
{{#each website in websites}}
{{website.title}}
Votes: {{website.totalVotes}}
<button class="js-upvote" data-id={{website._id}}>Vote Up</button>
{{/each}}
</template>
then, you need to subscribe, like this:
Template.Websites.onCreated(function() {
this.subscribe('websites');
});
i'll assume you already have a publish written, or auto publish is on...
then write the helper:
Template.Websites.helpers({
websites() {
return Websites.find({});
}
});
and finally the event listener that can identify which item was clicked:
Template.Websites.events({
'click .js-upvote': function(event, template) {
event.preventDefault();
if (event && event.currentTarget && event.currentTarget.dataset) {
let websiteId = event.currentTarget.dataset.id;
// now you can save the incremented votes for this website
}
}
});
Regarding your totalVotes variable, i think i understand what you're trying to do, and now you can get rid of that. with the code i've written, it will save to the db the increments and decrements of each website, and because you're subscribed, you'll get that updated vote total back and reactively display it in the template.
update:
alternatively, accessing _id without writing it to the DOM:
<template name="Websites">
{{#each website in websites}}
{{website.title}}
Votes: {{website.totalVotes}}
<button class="js-upvote">Vote Up</button>
{{/each}}
</template>
Template.Websites.events({
'click .js-upvote': function(event, template) {
event.preventDefault();
let websiteId = this._id;
// now you can save the incremented votes for this website
}
}
});

Reactive problems getting results with Meteor Search-Source package

Im triying implement a reactive search function for my first App in Meteor using Meteor:Search-source package. The search function is working fine. I have a input text search field, and 2 list. The first part called "search result" get the items found when we search for some word (for example try with london), and the second part get all items in my Collection. These items are linked to a reactive helper/template function. The reactivity when I get all items is working fine if I voteUp or Down. I can see in realtime how it is updated. But when I want upvote or downvote some item found in my search, upvote and downvote is not updating, is like the items found, lost the reactivity (I can see that if I upvote or downvote in some item in the first section ("search results") the items in second list (all items) is updating right....
this is my App My App
You can check it out the issue key in "london" in search field and upvote or downvote to see that in second list the item is correctly updated, but is not working if you upvote or downvote in "search result" section (no reactive).
CLIENT
// helper function
Template.searchResult.helpers({
getItems: function() {
return itemSearch.getData({
transform: function(matchText, regExp) {
return matchText.replace(regExp, "$&")
},
sort: {upvote: -1}
});
},
isLoading: function() {
return itemSearch.getStatus().loading;
}
});
//This line return all documents by default (when empty searchbox text is empty)
Template.searchResult.rendered = function() {
itemSearch.search('');
};
SERVER
SearchSource.defineSource('items', function(searchText, options) {
var options = {sort: {upvote: -1}, limit: 20};
// var options = options || {};
if(searchText) {
var regExp = buildRegExp(searchText);
/*var selector = {title: regExp, description: regExp};*/
var selector = {$or: [
{title: regExp},
{description: regExp}
]};
return Websites.find(selector, options).fetch();
} else {
return Websites.find({}, options).fetch();
}
});
function buildRegExp(searchText) {
var words = searchText.trim().split(/[ \-\:]+/);
var exps = _.map(words, function(word) {
return "(?=.*" + word + ")";
});
var fullExp = exps.join('') + ".+";
return new RegExp(fullExp, "i");
}
HTML
<!-- template that displays searched website items -->
<template name="searchResult">
<div class="container">
<div class="jumbotron">
<h3> Search results </h3>
<ol>
{{#each getItems}}
{{> website_item}}
{{/each}}
</ol>
</div>
</div>
<!-- template that displays individual website entries -->
<template name="website_item">
<li>
{{title}}
<p>
{{description}}
</p>
<a href="#" class="btn btn-default js-upvote">
<span class="glyphicon glyphicon-arrow-up" aria-hidden="true"> </span>
</a>
<a href="#" class="btn btn-success">
{{upvote}}
</a>
<a href="#" class="btn btn-default js-downvote">
<span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
</a>
<a href="#" class="btn btn-danger">
{{downvote}}
</a>
<p>
Created On: {{createdOn}}
</p>
<a href="/details/{{_id}}" class="btn btn-success js-description">
view web description
</a>
<!-- you will be putting your up and down vote buttons in here! -->
</li>
Some suggestion?? Many thanks in advance!

The returned data records themselves are not reactive, as the data is fetched internally using a method call (search.source).
You get a snapshot of the data as it was when you searched.
In addition, the data is cached by default, so subsequent searches for the same term don't trigger requests to the server for a certain period of time. You can adjust the time period via the keepHistory option.
Therefore, you will not get reactive changes via the package and it does not seem like an adequate solution for your situation.
You could try and get the data via a subscription and map the data returned from the search to the records in your collection but that seems to be costly.
Also, see this issue, which demonstrates that others had encountered the same type of issue.

Change scope value in a different view

Ok, I have struggeled a lot with this thing for some days now and I'm stuck. Here is what I want; I want to change my scope value in a different view by clicking on a button. So if I'm in the index.html view and click on a button I want to change the value of a scope on the index2.html view, and then display that view. Here is an example of my code which is not working
index.html
<div ng-controller="IndexController">
<button class="button button-block button-assertive" ng-click="checkValues()" value="checkitems" >
check values
</button>
</div>
IndexController.js
angular
.module('legeApp')
.controller('IndexController', function($scope, supersonic, $filter) {
$scope.checkValues = function(){
$scope.Diagnose = 'test';
var view = new supersonic.ui.View("legeApp#index2.html");
var customAnimation = supersonic.ui.animate("flipHorizontalFromLeft");
supersonic.ui.layers.push(view, { animation: customAnimation });
};
});
index2.html
<div ng-controller="IndexController">
<div class="card">
<div class="item item-text-wrap">
Test<b>{{Diagnose}} </b>
</div>
</div>
</div>
I can give the value outside the checkValues method, but I want it to be two different values depending on the button you click. Please help
I tried the code suggested, but I received an error. What am I doing wrong?
I try the code below and receive this error "SyntaxError: Unexpected token ':' - undefined:undefined". I also did not quite understand how and why I want to target the new value with supersonic.ui.views.params.current in the new view. I want to get the new value in the new view, not in a controller?Do I need two different controllers? I just want to update my values in a html view without being in it.
supersonic.ui.layers.push:
( view: view,
options: { params: {$scope.Diagnose : 'test'}
animation: customAnimation
}) => Promise

According to the supersonic push docs, the params attribute is meant for passing parameters between views:
JSON string of optional parameters to be passed to the target View,
accessible via supersonic.ui.views.params.current.
Try calling
supersonic.ui.layers.push: (
view: view,
options: {
params: {valueToBeSentAccrossView: <Your Value>}
animation: customAnimation
}) => Promise
and then retrieving the value in the target view using supersonic.ui.views.params.current.

I have two divs with the same ng-controller in AngularJS, how can I make them share information?

I have two different div tags in my html code referencing the same controller in AngularJS. What I suspect is that since these divs aren't nested they each have their own instance of the controller, thus the data is different in both.
<div ng-controller="AlertCtrl">
<ul>
<li ng-repeat="alert in alerts">
<div class="span4">{{alert.msg}}</div>
</li>
</ul>
</div>
<div ng-controller="AlertCtrl">
<form ng-submit="addAlert()">
<button type="submit" class="btn">Add Alert</button>
</form>
</div>
I know this could easily be fixed by including the button in the first div but I feel this is a really clean and simple example to convey what I am trying to achieve. If we were to push the button and add another object to our alerts array the change will not be reflected in the first div.
function AlertCtrl($scope) {
$scope.alerts = [{
type: 'error',
msg: 'Oh snap! Change a few things up and try submitting again.'
}, {
type: 'success',
msg: 'Well done! You successfully read this important alert message.'
}];
$scope.addAlert = function() {
$scope.alerts.push({
type: 'sucess',
msg: "Another alert!"
});
};
}

This is a very common question. Seems that the best way is to create a service/value and share between then.
mod.service('yourService', function() {
this.sharedInfo= 'default value';
});
function AlertCtrl($scope, yourService) {
$scope.changeSomething = function() {
yourService.sharedInfo = 'another value from one of the controllers';
}
$scope.getValue = function() {
return yourService.sharedInfo;
}
}
<div ng-controller="AlertCtrl">{{getValue()}}</div>
<div ng-controller="AlertCtrl">{{getValue()}}</div>

If I understand the question correctly, you want to sync two html areas with the same controller, keeping data synced.
since these divs aren't nested they each have their own instance of the controller, thus the data is different in both
This isn't true, if you declare the controllers with the same alias (I'm using more recente angular version):
<div ng-controller="AlertCtrl as instance">
{{instance.someVar}}
</div>
<div ng-controller="AlertCtrl as instance">
{{instance.someVar}} (this will be the same as above)
</div>
However, if you WANT them to be different and comunicate each other, you will have to declare different aliases:
<div ng-controller="AlertCtrl as instance1">
{{instance1.someVar}}
</div>
<div ng-controller="AlertCtrl as instance2">
{{instance2.someVar}} (this will not necessarily be the same as above)
</div>
Then you can use services or broadcasts to comunicate between them (the second should be avoided, tough).