We Keep Coding

HTML - inline tags not refelecting

I have a page where it loads some values from a spreadsheet, and displays the values on the page. (i.e. so it can handle multiple languages).
Problem
When I put html tags in the spreadsheet, they are not applied.
Example
If I put the following text in an html file and view it, the browser applies the html tags as expected.
<div><a href='http://...'>some <br> value</a></div>
However, when it is applied loaded from the spreadsheet, the <br> tag is not applied and it stays on one line.
<div class="col-xs-12 col-sm-6 pull-right">
<a ui-sref="open.registration.login.resetPassword"
class="bmw-command-link bmw-mt-2 bmw-mb-2">{{ 'gcdm-login.forgotten_password' |
translate }}</a>
</div>
Also, if I update the value in Chromes Developer tools, the value changes in the browser, but html tags are not applied. It is as if the browsers display does not refresh to apply html tags.
Question
Is there a way I can get the html tags read in from the spreadsheet applied?
Is this a timing issue, meaning that the DOM is rendered already and cannot be changed on the fly?
Thanks

It really depends on what version of Angular you use, but for all it resumes to one thing: you have to bind your text as HTML by using either ng-bind-html directive or [innerHTML] property.
AngularJS:
<div class="col-xs-12 col-sm-6 pull-right">
<a ui-sref="open.registration.login.resetPassword"
class="bmw-command-link bmw-mt-2 bmw-mb-2" ng-bind-html="'gcdm-login.forgotten_password' | translate"></a>
</div>
Angular 2-6:
<div class="col-xs-12 col-sm-6 pull-right">
<a ui-sref="open.registration.login.resetPassword"
class="bmw-command-link bmw-mt-2 bmw-mb-2" [innerHTML]="'gcdm-login.forgotten_password' | translate"></a>
</div>
I've also made you an working example here.

its work fine
try this
<div class="col-xs-12 col-sm-6 pull-right">
<a ui-sref="open.registration.login.resetPassword" class="bmw-command-link bmw-mt-2 bmw-mb-2">forgotten<br>password</a>
</div>

repeat div section in the length of list (Ionic)

I have a custom JavaScript file with some function in it. All the functions work perfectly fine.
One of the functions returns a list modules. I would like to repeat in my template the div section as many times is the length of my list.
This is my ionic template file:
<ion-view title="My Marks" id="page7">
<ion-content ng-controller="MyMarks" padding="true" class="has-header">
<div ng-repeat="module in getCourseModules">
<div class="row">
<div class="col">{{module}}</div>
</div>
<div class="row">
<div class="col col-50">Module Mark</div>
<div class="col col-50">{{GenerateRandomMarks[i]}}</div>
</div>
<br>
<br>
</div>
</ion-content>
And this is my controller inside my app.js:
app.controller('MyMarks', function ($scope){
$scope.courseNum = GenerateRandomNumber(0, 9);
$scope.getCourseName = getCourseName(courseNum);//Returns just Text
$scope.getCourseModules = getCourseModules(courseNum); //Returns the list
$scope.GenerateRandomMarks = GenerateRandomMarks(); //Returns a list of numbers
});
How can I repeat the segment of code I need? and in that segment of code, each time is repeated it should display different element of the list {{getCourseModules[i]}}.
I solved the most of it. But I cant figure out the repeat part. If I manually copy/and paste the code it works fine.

You need to use ngRepeat directive.
<div ng-repeat="model in getCourseModules">{{model}}</div>
<div ng-repeat="model in getCourseModules">{{someAnotherArray[$index]}}</div>

Conditionals in angular templates

I'm currently developping an app using ionic (1.3)/angular (1.5). This is my first time using angular, but I have been developping with ember.js for the past two or three years.
I'm a bit confused by how I can conditionally display stuff in templates : in ember, I would do
<div class="col-xs-12">
{{#if condition}}
some template..
{{else}}
something else
{{/if}}
</div>
But in angular, it seems to me that you'd have to do :
<div class="col-xs-12" ng-if="condition">
some template..
</div>
<div class="col-xs-12" ng-if="!condition>
something else
</div>
Which to me seems really cumbersome and does not really convey the intention. Is there any other (better) way to display stuff conditionally in templates ?
Thanks a lot for your time !

There is one more way to achieve this as show in the code below:-
<div ng-switch="myVar">
<div ng-switch-when="condition1">
some tempelate....
</div>
<div ng-switch-when="condition2">
some tempelate....
</div>
<div ng-switch-when="condition3">
some tempelate....
</div>
<div ng-switch-default>
some fallback template ...
</div>
</div>

try this, here is working fiddle
<div ng-controller="MyCtrl">
<div class="col-xs-12" ng-show="condition">
some template..
</div>
<div class="col-xs-12" ng-show="!condition">
something else
</div>
</div>
controller, try using changing $scope.condition=false
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.condition = true;
//$scope.condition = false;
}

How to create directive with angularjs binding expression?

I need to convert below code to dynamic code using angular directive or any other angular way.
one Directive:
<view-partial></view-partial>
view-partial.html
<div id="layoutFormation">
<div ng-repeat="container in layoutJSON.layoutInfo.containers" class="row form-container x_panel tile">
<div class="x_title nopadding"><label class="container-header">{{(container.headerText == " ") ? "" : container.headerText }} </label></div>
<div number-of-rows="{{ container.table.numOfRows }}" number-of-columns="{{ container.table.numOfColumns }}" class="x_content col-md-12 col-xs-12 collapse-expand">
<div ng-repeat="columnNumber in range(container.table.numOfColumns)" class="col-lg-6 col-md-6 col-sm-6 col-xs-12 column">
<binding-control-block ng-repeat="rowNumber in range(container.table.numOfRows)" row-number="{{rowNumber}}" column-number="{{columnNumber}}" style='margin-bottom: 12px;' />
</div>
</div>
</div>
</div>
Here binding-control-block is another directive that directive with binding code already i'm doing in dynamically. Only thing the above partial page also i need to convert dynamically. I think I have to add all the above view-partial code in another directive. just i need any example or idea how to create directive with binding expression. Please any one help me to achieve this. If any clarification need please message me. Thanks in advance.

ng-repeat repeating elements but not showing content inside ng-view

I have a controller:
function ItemsController($scope, $http){
$scope.init = function(){
$scope.siteItems = [
{id:'1', path:'img/1.png'},
{id:'2', path:'img/2.png'}
];
}
};
and I have a view items.html:
<div class="row" ng-controller="ItemsController" ng-init="init()">
<div class="col-xs-6 col-md-3" ng-repeat="item in siteItems">
<a href="#/item/{{item.id}}" class="thumbnail">
<img src="{{item.path}}">
</a>
</div>
</div>
when ever I load the view inside the ng-view the list gets initialised and ng-repeat produces two elements. However {{item.path}} and {{item.id}} are empty. I tried to do it with ng-src but the result was the same. I was curious if it will work with ng-bind just to see if it will bind the content and it works but its not what Im trying to do. When ever I move the content from the items.html to the main index.html view everything works. Does anybody have an idea what am I doing wrong?
EDITED:
Here is a working plunker. On my machine I wrote it like:
and I get a result of:

I landed this on this probably 2 years late, but I was using Jekyll and although it's strange that the source code look exactly the same, meaning it should work, it doesn't.
The reason being {{ }} is being reserved for Liquid template engine. To overcome this, I have found this code to re-define the syntax.
var myApp = angular.module('myApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
So now I can use [[ ]] instead of {{ }} and it works out.
Source: http://www.noxidsoft.com/development/using-jekyll-and-angularjs-together/

Have you tried doing it like this:
function ItemsController($scope, $http){
$scope.items = [
{id:'1', path:'img/1.png'},
{id:'2', path:'img/2.png'}
];
};
And the Html without the init?
<div class="row" ng-controller="ItemsController">
<div class="col-xs-6 col-md-3" ng-repeat="item in items">
<a href="#/item/{{item.id}}" class="thumbnail">
<img src="{{item.path}}">
</a>
</div>
</div>

I made a plunker out of mylescc's answer, and it's working fine:
<div class="row" ng-controller="ItemsController">
<div class="col-xs-6 col-md-3" ng-repeat="item in items">
<a href="#/item/{{item.id}}" class="thumbnail">
<img src="{{item.path}}">
</a>
</div>
</div>
There is no picture at there referenced path, of course, but the href link is shown correctly. And actually your code works fine, too. See plunker. So, it seems to me, you haven't initialized angularjs correctly.