We Keep Coding

AngularJS - Multiple {{ }} in title attribute in TD element

I have a problem to display a tooltip with the title attribute with AngularJS with multipe {{ }}.
I'm making kind of a calendar.
I have this :
<tr ng-repeat="horaire in triPlan(planning)">
<td>A</td>
<td class="abraca" ng-click="selectionHoraire(horaire)" ng-repeat="rdv in horaire" data-toggle="tooltip" data-placement="left"
title="{{rdv.nom}} is {{rdv.age}} year old">{{rdv.nom}}</td>
</tr>
But when I hover the TD element, it displays this " {{rdv.nom}} is {{rdv.age}} year old ". And if I put only one {{ expression }} in the title attribute, it works perfectly.
How put multiple {{ }} expressions in this title attribute ?
UPDATE : PROBLEM SOLVED
You can see in the answers and comments below that I use the 1.6.4 AngularJS Version.
The ng-attr-title don't work for me in a ng-repeat itself inside a ng-repeat. So, I don't know really why but after some tests, I put this line code :
<script src="https://code.angularjs.org/1.2.9/angular.min.js"></script>
And I was surprised to see that it works !! title="{{rdv.nom}} is {{rdv.age}} year old">{{rdv.nom}}
There some differences between the version, I don't know why in a older version it works and in a newer it doesn't.
FINALLY the result to make it works, thanks to #georgeawg.
It's to combine the two or more interpolation in only one (The text is in French, don't worry) :
title="{{rdv.nom+' a l\'âge : '+rdv.age+' et vient pour : '+rdv.text}}"
Thanks everyone !

Use ng-attr-title.
From the angularJS documentation:
Web browsers are sometimes picky about what values they consider valid for attributes.
If an attribute with a binding is prefixed with the ngAttr prefix (denormalized as ng-attr-) then during the binding it will be applied to the corresponding unprefixed attribute. This allows you to bind to attributes that would otherwise be eagerly processed by browsers...
<td class="abraca" ng-click="selectionHoraire(horaire)"
ng-repeat="rdv in horaire" data-toggle="tooltip" data-placement="left"
ng-attr-title="{{rdv.nom}} is {{rdv.age}} year old">{{rdv.nom}}</td>

Combine the two interpolations into one:
<!-- BEFORE
<tr ng-repeat="horaire in triPlan(planning)">
<td>A</td>
<td class="abraca" ng-click="selectionHoraire(horaire)" ng-repeat="rdv in horaire" data-toggle="tooltip" data-placement="left"
title="{{rdv.nom}} is {{rdv.age}} year old">{{rdv.nom}}</td>
</tr>
-->
<!--AFTER -->
<tr ng-repeat="horaire in triPlan(planning)">
<td>A</td>
<td class="abraca" ng-click="selectionHoraire(horaire)" ng-repeat="rdv in horaire" data-toggle="tooltip" data-placement="left"
title="{{rdv.nom+' is '+rdv.age+' year old'}}">{{rdv.nom}}</td>
</tr>
For more information, see AngularJS Developer Guide - Expressions

Ok,
I found out something thanks to #Dragos Paul Marinescu redirection question.
I found out that if I use the angular.js of the version 1.6.4. The tooltip don't display correctly, but if I use the angular.min of the version 1.2.9, its works perfectly...
I had this :
<script type="text/javascript" src="angular.js"></script>
And if I add this in my HTML :
<script src="https://code.angularjs.org/1.2.9/angular.min.js"></script>
Now it works perfectly... Thanks...But I really don't understand why it makes this. Why a higher version don't make the tooltip works ?
And it's a dirty way I think to put this two lines together to make my app works...

How to show the name of the variable in an AngularJS website?

I'm trying to show the name of the variable in my website written with AngularJS.
for example:
Backend code:
$scope.Bundles = {
Bundle1:["Sensor1","Sensor2"],
Bundle2:["Sensor1","Sensor2","Sensor3"],
Bundle3:["Sensor1","Sensor2","Sensor3","Sensor4"]
}
Frontend code:
<label ng-repeat="name in Bundles">
<div> *Want to show "Bundle#" (name), instead of it's value (the sensors)* </div>
</label>
Some notes:
From google searches, I always find people asking how to show the value of the variable, {{name}}, I know that, haven't found anything like the question im asking here
I need it because later in the code I will need to do a ng-repeat with "sensor in name" to show the sensors separately, so I really need a concrete solution and not a dirty one with another array holding the names.
Thank you.

You can access both the key and value using:
<label ng-repeat="(key, value) in Bundles">
<div> *Want to show {{ key }}, instead of it's value {{ value }} (the sensors)* </div>
</label>

You can use the tuple returned by the ng-repeat as stated in the docs https://docs.angularjs.org/api/ng/directive/ngRepeat
<label ng-repeat="(key,value) in Bundles">

You can use javascipt Object.keys(arr) to get all the keys and then iterate to the keys using ng-repeat.
$scope.BundleNumbers = Object.keys($scope.Bundles)
$scope.BundleNumbers will have ["Bundle1", "Bundle2", "Bundle3"]
<label ng-repeat="name in BundleNumbers">
{{name}}
</label>
The other and efficient/angular way to do is :
<label ng-repeat="(key,value) in Bundles">{{key}} </label>
Reference links:
Angular JS ng Repeat
JavaScript Object keys

AngularJS ng-click inside ng-repeat

I have a ng-click nested inside a ng-repeat, and I am trying to pass a value from the current item in the loop. If I inspect the html generated using Chrome developer tools it looks correct (&ID=1) but when I put a break point in the function it shows &ID={{d.ID}} as the value that gets passed to the function.
Any help is appreciated.
<tr ng-repeat-start="d in data">
</td>
<td>
{{d.OrganizationName}}
</td>
</tr>

Try it:
<tr ng-repeat-start="d in data">
</td>
<td>
<a href="" ng-click="openDialog(false,'http://portal.sharepoint.com/Lists/Organization/DispForm.aspx?IsDlg=1&ID='
+d.ID)"> {{d.OrganizationName}}</a>
</td>
</tr>

I would recommend passing the Id in as an attribute of the openDialog method and building the url string in the controller.
ng-click="openDialog(false,'http://portal.sharepoint.com/Lists/Organization/DispForm.aspx?IsDlg=1', d.ID)"
then build the string in the controller and perform your location change. Easier to debug and un-clutters the view.
you could also store this string in your controller 'http://portal.sharepoint.com/Lists/Organization/DispForm.aspx?IsDlg=1'
ng-click="openDialog(false, d.ID)"

ngClick directive will evaluate an expression. I guess it's not what you want
Try to change ng-click by simple onclick. It will solve your problem:
Change
{{d.OrganizationName}}
for
{{d.OrganizationName}}
With ng-click. you don't need to use {{}} in order to get the variable value. Like in this sample from Angular Docs
<button ng-click="count = count + 1" ng-init="count=0">
Increment
</button>
<span>
count: {{count}}
</span>

Angular JS. I am attempting to filter a simple list of results using check boxes

I am attempting to allow my users to filter my results array using check boxes.
I am just getting in to the Angular JS frame work and not quite sure how to approach my scenario.
I am trying to work out if what I am doing is possible in the way I am approaching it or do I simply need to write a custom filter function.
I have put together a simple jsfiddle to illustrate my issue.
http://jsfiddle.net/arkleyjoe/7jUp6/
Here is the mark up:
<div ng-app="">
<div ng-init="friends = [{name:'John', phone:'555-1276'},
{name:'Mary', phone:'800-BIG-MARY'},
{name:'Mike', phone:'555-4321'},
{name:'Adam', phone:'555-5678'},
{name:'Julie', phone:'555-8765'}]"></div>Exclude Johns
<input ng-model="search.name" name="name" type="checkbox"
ng-true-value="!John" ng-false-value="">
<br>Exclude Adams
<input ng-model="search.name" name="name" type="checkbox"
ng-true-value="!Adam" ng-false-value="">
<br>
<table id="searchObjResults">
<tr>
<th>Name</th>
<th>Phone</th>
<tr>
<tr ng-repeat="friend in friends | filter:search">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<tr>
</table>
</div>
In this example I am using check boxes to filter certain names from my list. It works fine if I select one or the other but I want to select both. Angular JS is obviously doing something behind the scenes here because it actually prevents me having two boxes selected.

You are trying to bind a single property search.name for both the check boxes, so checking one of them would override the value set by the other one. If you want to filter on both check box values you need to assign the ng-model expression to different model properties.
You can create a method on the controller and pass it to the filter expression, this method would be called one time for each item in the list. If the function returns true the item is added to the end result. You can write your custom filter expression here. See filter documentation here

knockout JS bind to properties of object

I have a need to bind some HTML to an object, but my issue is that I don't know the properties of the object at development time.
I have a selectedItem property in my main view model which I have bound to a section in my HTML:
<div data-bind="with: selectedItem">
</div>
Now I want to generate a table based on the property name and property values:
<div data-bind="foreach: [WHAT DO I PUT HERE?]">
<label class="control-label"><span data-bind="text: [OR HERE?]" /></label>
</div>
I have really no idea how to do this. Any help is greatly appreciated.
Also, just slightly extending this, I would like to handle the properties of the bound object differently, such as, if the property is just a primitive type, just output it, but if its another object/array, then handle it specially.
Can this be done?

If anyone else is looking to bind a simple object's properties. You can do it like this...
<table>
<tbody data-bind="foreach: arrayOfObjects">
<tr data-bind="foreach: Object.keys($data)">
<td data-bind="text: $parent[$data]"></td>
</tr>
</tbody>
</table>
note: object.keys is not supported in older browsers, but you can use this to add backwards compatability http://whattheheadsaid.com/2010/10/a-safer-object-keys-compatibility-implementation

Here is a working example using computed observable to select at runtime the data to show. Dynamically selected templates are also used to render the data according to the type of data to render (array or scalar).