How can I create simple conditional handlebar?
What I want to do is get from collections that if mood =='+', render the roll in white, else render some other color.
This is HTML:
{{#if moodIsPlus}}
<tr>
<td>
<strong>{{mood}} <i class="icon-hand-up" value="+"></i></strong> {{message}}<br>
</td>
</tr>
{{else}}
<tr class="info">
<td>
<strong>{{mood}} </strong> {{message}}<br>
</td>
</tr>
{{/if }}
which moodIsPlus is define in JS:
Template.messages.moodIsPlus = function() {
return Messages.find({mood:'+'});
}
and it returns everything.
By the way, are handlebars and handlebar.js the same thing? Where can I get more reference on handlebar in meteorjs?
Checkout the Meteor Smart Package Handlebar-helpers as it comes with lots of similar helpers.
Here is how you would achieve what you are looking for with it:
<tr>
<td>
<strong>{{#if $eq mood '+'}}<i class="icon-hand-up" value="+"></i>{{/if}}</strong> {{message}}<br>
</td>
</tr>
You can used spacebar or handlebar(old) function to accomplish this.
First is get all messages. You can put it inside Template helpers like this:
Messages.helpers({
messages: function(){
return Messages.find({});
},
moodIsPlus: function(mood){
return (mood === "+") ? true : false; // return true if mood === "+"
}
});
Then, in your template.
{{#if moodIsPlus mood}} mood is from your Messages collection. that contains "+" or whatever.
<tr>
<td>
<strong>{{mood}} <i class="icon-hand-up" value="+"></i></strong> {{message}}<br>
</td>
</tr>
{{else}}
<tr class="info">
<td>
<strong>{{mood}} </strong> {{message}}<br>
</td>
</tr>
{{/if }}
Hope this help.
Related
My code is quite simple. I only want to add John and Marie to my table.
Works great but my issue is if there is no John and Marie I want to create a row and show a - in my td.
How do I know if there was not added any row when the ng-repeat ends?
<tr class="text-center" ng-if="name == 'John' || name == 'Marie'" ng-repeat="name in vm.names track by $index">
<td>{{name}}</td>
</tr>
Use the ng-switch directive:
<tr class="text-center" ng-switch"name" ng-repeat="name in vm.names track by $index">
<td ng-switch-when="John">{{name}}</td>
<td ng-switch-when="Marie">{{name}}</td>
<td ng-switch-when="Paul">{{name}}</td>
<td ng-switch-default>-</td>
</tr>
You could map your original object in the controller with something like this:
this.names = this.names.map(name => {
name ? name : '-';
})
**main.js:**
$scope.status = [
{name:'SQL', stat:"up"},
{name:'Web Server', stat:"down"},
{name:'Index', stat:"down"}
];
**index.html:**
<table>
<tr>
<td ng-repeat="x in status">
<div ng-if="{{x.name}}=='SQL'"> {{x.stat}} </div>
</td>
</tr>
</table>
<table>
<tr>
<td ng-repeat="x in status">
<div ng-if="{{x.name}}=='SQL'" ng-class="{{x.stat}}=='up'? 'squareGreen':'squareRed'"> {{x.name +" : "+x.stat}} </div>
</td>
</tr>
</table>
I am trying to pass status array to index.html to compare the 'name' to a string then apply class squaregreen or red depending upon comparison of 'stat' to 'up' or 'down'. The goal is to match the name of the server and apply green when up and red when down. I have 2 problems below. 1. parse error in syntax for ng-if 2. all servers are applied Squarered, though 1st server(sql)'s 'stat' is 'up'
Remove all the curly braces from your ng-if and ng-class expressions and it should work. E.G:
main.js:
$scope.status = [
{name:'SQL', stat:"up"},
{name:'Web Server', stat:"down"},
{name:'Index', stat:"down"}
];
**index.html:**
<table>
<tr>
<td ng-repeat="x in status">
<div ng-if="x.name=='SQL'"> {{x.stat}} </div>
</td>
</tr>
</table>
<table>
<tr>
<td ng-repeat="x in status">
<div ng-if="x.name=='SQL'" ng-class="x.stat=='up'? 'squareGreen':'squareRed'"> {{x.name +" : "+x.stat}} </div>
</td>
</tr>
</table>
Curly braces are not necessary here because ng-if and ng-class bindings are evaluated as scope expressions already. Use curly braces when a directive does not do this by default (e.g. with '#' bindings). AngularJS docs on scope binding
Take out your curly braces. ng-if="x.name === 'SQL'"
You don't need to use the extrapolation {{}} operator within ng-if and you need to use the {} within your ng-class
<div ng-if="x.name == 'SQL'" ng-class="{x.stat=='up'? 'squareGreen':'squareRed'}"> {{x.name +" : "+x.stat}} </div>
I'm trying to teach myself AngularJS, and I've been staring at this piece of code for so long, my eyes are starting to cross.
I have a JSON file of cats containing the properties name, sex, color, pattern, and picture for each cat object. (sex in this case is a Boolean; 0 for female and 1 for male. This will come back up soon.)
I use the following code to loop through the JSON file and print out a table of all cat objects, and it works correctly (and even pretties up the formatting a bit):
<table>
<tr>
<th>Name</th>
<th>Sex</th>
<th>Color</th>
<th>Pattern</th>
<th>Picture</th>
</tr>
<tr ng-repeat="kitty in cats">
<td>{{kitty.name|capitalize}}</td>
<td ng-if="kitty.sex == 0">Female</td>
<td ng-if="kitty.sex == 1">Male</td>
<td>{{kitty.color|capitalize}}</td>
<td>{{kitty.pattern|capitalize}}</td>
<td ng-if="kitty.picture"><img ng-src="{{kitty.picture}}" alt="{{kitty.name|capitalize}}"></td>
<td ng-if="!kitty.picture">NO IMAGE</td>
</tr>
</table>
What I would like now is to allow a user to click a checkbox, e.g. "Male", and have the view change to display all cat objects where sex is 1. I can achieve this by replacing:
<tr ng-repeat="kitty in cats">
...with...
<tr ng-repeat="kitty in cats | filter:{'sex': 1}">
...but for obvious reasons, I would much prefer to have this functionality available dynamically, rather than hard-coded.
I've tried various ng-models as well as names, ids, and values on a given checkbox, but I have yet to figure out the correct syntax with which to pass the argument 1 to the repeat function, to have it filter the cats as necessary.
Does anyone have any ideas on how these two should be bound?
you probably want this:
HTML
<table>
<tr>
<th>Name</th>
<th>Sex</th>
<th>Color</th>
<th>Pattern</th>
<th>Picture</th>
</tr>
<tr ng-repeat="kitty in cats | filter : {sex: genderFilter}">
<td>{{ kitty.name }}</td>
<td>{{ kitty.sex ? 'Male' : 'Female' }}</td>
<td>{{ kitty.color }}</td>
<td>{{ kitty.pattern }}</td>
<td ng-if="kitty.picture">
<img ng-src="{{kitty.picture}}" alt="{{kitty.name|capitalize}}">
</td>
<td ng-if="!kitty.picture">NO IMAGE</td>
</tr>
</table>
<label>
<input type="checkbox"
ng-true-value="1"
ng-false-value
ng-model="genderFilter">Male
</label><br>
<label>
<input type="checkbox"
ng-true-value="0"
ng-false-value
ng-model="genderFilter">Female
</label>
PLUNKER: http://plnkr.co/edit/av2cyzJmwxJLkqhSFnOv?p=preview
You can send filter value dynamically based on selected checkbox value.
<table ng-repeat="cat in cats | filter : { sex: selectedGender }" style="width:300px">
verify this sample http://fiddle.jshell.net/w9darn8a/2/
It's my first time trying to build something with angular , and i find myself not able to retrieve some JSON data.
The data is retrieve from a SQL database in JSON form then passed to a template thanks to angular route :
.when('/tasks/:TaskID',{
templateUrl: 'template/task_data_template.html',
controller:"showTaskData",
controllerAs: 'STD'
})
The showTaskData is defined as follow :
angular.module('moonDive').controller('showTaskData',function($http,$routeParams){
var store = this;
store.tasks= [];
json_Url = 'api/tasks_data.php?TaskID=' + $routeParams.TaskID;
$http.get(json_Url).success(function(data){
store.tasks = data;
})});
My Data have this structure :
This is accessible from the template html by :
{{STD.tasks[1]}}
Which return the data in that "JSON" way :
{
"ActionID": "1",
"Taskref": "1",
"Ast1_1": "",
"Ast2_1": "Start EVA watch\nopen hatch\nAssist CDR",
"Ast3_1": "",
"Ast1_2": "Egress cabin to LM porch\nReceive & jetttison bag\nReceive ETB/LEC",
"Ast2_2": "Deploy CDR PLSS antenna\nHand jettison bag to CDR\nHand ETB/LEC to CDR",
"Ast3_2": "",
"Ast1_3": "Descend lander to top rung\nUnlock and deploy MESA\nLower ETB on LEC",
"Ast2_3": "Tape recorder -off\nVerify voice signals level and uitlity floo [......]"
}
So far so good, so my final purpose is to have a table with two column (ast1 , ast2) and X row for X task. I'm not really sure how to begin , but i've tried something like that :
<table class="bordered hoverable responsive-table">
<tbody>
<tr ng-repeat="boo in STD.tasks[1]">
<td style=" color: blue;" ng-if="$odd"> {{boo}}</td>
<td style="color:red" ng-if="$even"> {{boo}}</td>
</tr>
</tbody>
</table>
Well no luck it doesn't work at all, but one weird thing that prevent me to understand what's going on is that it displays all the information but in what seems to be a random order.
I'd like to delete rows with "1" ; usually i would do a ng-if="boo.NameOfTheRow" ; but here i don't really have access to this name do I ?
So my question is : How to delete the unnecessary data? And how can I arrange my data by Astr1 and 2 (for the columns) and task 1 to X (for the rows)
Thanks a lot !
PS :
The generated code should look like that :
<table>
<thead>
<td> task </td>
<td> Astr 1 </td>
<td> Astr 2 </td>
<td> Astr 3 </td>
</thead>
<tbody>
<tr>
<td> 1</td>
<td> {{STD.tasks[1].Ast1_1}} </td>
<td> {{STD.tasks[1].Ast2_1}}</td>
<td>{{STD.tasks[1].Ast3_1}} </td>
</tr>
<tr>
<td> 2</td>
<td> {{STD.tasks[1].Ast1_2}} </td>
<td> {{STD.tasks[1].Ast2_2}}</td>
<td>{{STD.tasks[1].Ast3_2}} </td>
</tr>
<tr>
<td> 3</td>
<td> {{STD.tasks[1].Ast1_3}} </td>
<td> {{STD.tasks[1].Ast2_3}}</td>
<td>{{STD.tasks[1].Ast3_3}} </td>
</tr>
....
<tr>
<td> 7</td>
<td> {{STD.tasks[1].Ast1_7}} </td>
<td> {{STD.tasks[1].Ast2_7}}</td>
<td>{{STD.tasks[1].Ast3_7}} </td>
</tr>
</tbody></table>
Thus the data should be displayed as :
If your STD.tasks is an array of entries, then you need to simply change your ng-repeat to ng-repeat="boo in STD.tasks".
You should be getting back JSON data in array form:
[
{"field":"value", "field2": "value"},
{"field":"value", "field2": "value"},
{"field":"value", "field2": "value"},
...
]
ng-repeat will want to iterate over each of those values in the array. Right now, you've pointed it to the very first item in the array, so it's repeating over each property in the object.
in the client side, I have a json object which I receive from REST service somewhere. This object has more that one attribute, one of them is a String array. I want some assistance on how to print this array using angular JS code embedded within html.
this is my JSON object:
[
"title": "Developing a System for Information Management in Disaster Relief",
"url": "http://scholar.google.com/scholar",
"relatedTitles":
[
"Distributed robotic sensor networks",
"Improving information access for emergency",
"Tangible and wearable user interfaces for",
"Non-parametric inferenc",
"Airborne near-real-time monitoring of assembly"
]
]
and here is how the html ng-repeat looks like.
<tr ng-repeat="publication in publications">
<td>{{publication.title}}</td>
<td>{{publication.url}}</td>
<td>{{publication.relatedTitles}} </tr>
Note:"publications" is the JSON object name
It depends on how you want to print it. If you want it like and array, joined with commas for example use this html code:
<tr ng-repeat="publication in publications">
<td>{{publication.title}}</td>
<td>{{publication.url}}</td>
<td>{{publication.relatedTitles.join(', ')}}
</tr>
Else, if you want with a <span> tag each for example, you can do another ng-repeat:
<tr ng-repeat="publication in publications">
<td>{{publication.title}}</td>
<td>{{publication.url}}</td>
<td>
<span ng-repeat="relatedTitle in publication.relatedTitles">
{{publication.relatedTitles}}
</span>
</td>
</tr>
You can nest ng-repeat's
So you should be able to do something like this:
<tr ng-repeat="publication in publications">
<td>{{publication.title}}</td>
<td>{{publication.url}}</td>
<td>
<table>
<tr ng-repeat="title in publication.relatedTitles">
<td>{{title}}</td>
</tr>
</table>
</td>
</tr>
<tr ng-repeat="publication in publications">
<td>{{publication.title}}</td>
<td>{{publication.url}}</td>
<td>
<span ng-repeat="title in publication.relatedTitles">
{{title}}<br>
</span>
</td>
</tr>