We Keep Coding

How to add condtion inside curly brace in angularjs?

I have variable called $scope.carname = "Volvo" and in html i need to check carname is exist or not if exist that time i need to show link otherwise i need to show some hard coded value(test)
Below is my code
Html
<h1>{{carname ? <a href='link'>Go here </a> : test}}
controller
$scope.carname = "Volvo";
$scope.link= "https://www.w3schools.com"
Here Is link

Use to use two ng-if expressions
<h1 ng-if="carname"> <a href='link'>Go here </a> </h1>
<h1 ng-if="!carname"> {{test}} </h1>

You need to use ng-if
$scope.test ="123"
$scope.carname = "Volvo";
HTML:
<div ng-if="carname !== ''">{{test}}</div>
<div ng-if="carname === ''">hard coded value</div>
plunker: http://next.plnkr.co/edit/0KBOPuiYsXmYNQfo

How to select an element from _ngcontent block using protractor?

I have below structure for my angular app.
<div _ngcontent-c8 class=“page-body”>
<div _ngcontent-c8 class=“cell-list”>
<a _ngcontent-c8="" class="cell cell-row ng-star-inserted"
queryparamshandling="preserve" ng-reflect-query- params-
handling="preserve" ng-reflect-router-link=“/path” href=“/link”
</a>
<a _ngcontent-c8="" class="cell cell-row ng-star-inserted"
queryparamshandling="preserve" ng-reflect-query- params-
handling="preserve" ng-reflect-router-link=“/path” href=“/link”
</a>
<a _ngcontent-c8="" class="cell cell-row ng-star-inserted"
queryparamshandling="preserve" ng-reflect-query- params-
handling="preserve" ng-reflect-router-link=“/path” href=“/link”
</a>
</div>
How would I select specific a tag from this structure? In the previous version of angular with ng-repeat directive, I could use "(element.all(by.repeater))".However it does not work for the above code.
I tried using element.all(by.css)), but that does not work either.
Do you guys have any suggestions?

Try following code:
getByAttribute(searchText: string): ElementFinder {
let container = element(by.css('.page-body .cell-list'));
return container.all(by.tagName('a')).filter(function(el) {
return el.getAttribute('href').then(function(value) {
return value.trim() === searchText;
});
}).first();
}
This code lists all a elements and filters them by it's href value. This is an example for showing you how to filter values.

Alternative or better approach for *NgIf

Hi I have several *NgIf conditions in my template. Based on the NgIf I display/render my components(different type of form) in the template. Example in one of my function (below)
private _onClick(cell:any){
this._enableView = false;
this._enableCreate = true;
this._enableDelete = false;
this._enableEdit = false;
}
Which is to enable my create form in the template and hide other forms if its there. But doing so feel like bit wrong or redundant to me. Is there any better approach or suggestion instead of this approach?

If it is possible to have a single state as suggested by Leguest I would recommend ngswitch used like this:
// Syntax for ngSwitch
<div [ngSwitch]="state">
<div *ngSwitchCase="'create'"> ... </div>
<div *ngSwitchCase="'view'"> ... </div>
<div *ngSwitchCase="'edit'"> ... </div>
<div *ngSwitchCase="'delete'"> ... </div>
<div *ngSwitchDefault> ... </div>
</div>
Otherwise if you are using Angular 4.x you can take advantage of ngIf else:
// Syntax for ngIf/Else
<div *ngIf=”condition; else elseBlock”>Truthy condition</div>
<template #elseBlock>Falsy condition</template>

I am not sure is it better or worse, but you can have one state property e.g. this.state, that contains string:
JS
private _onClick(cell:any){
this.state = 'create'
}
HTML
<div *ngIf="state == 'create'">
// create form
</div>
<div *ngIf="state == 'view'">
// view form
</div>
<div *ngIf="state == 'edit'">
// edit form
</div>
<div *ngIf="state == 'delete'">
// delete form
</div>
So you replace part of your code into templates, I hope it reduce your js codebase

Angular js : Dynamic expression not working for ng-switch [duplicate]

I have a div based on switch but the switch has a boolean variable but the value will be evaluated based on the row.id. Can some one tell me what I am doing wrong here ?
<div ng-switch="hasUrl">
<a ng-switch-when="row.id.indexOf(':') < 0 === true" href="{{url + row.id}}"> <!-- hasUrl = true -->
{{getName(row)}}
</a>
<a ng-switch-default href=".......">
{{getName(row)}}
</a>
</div>

You don't need the ===, remove it.
<div ng-switch="hasUrl">
<a ng-switch-when="row.id.indexOf(':') < 0" href="{{url + row.id}}"> <!-- hasUrl = true -->
{{getName(row)}}
</a>
<a ng-switch-default href=".......">
{{getName(row)}}
</a>

Be aware that the attribute values to match against cannot be
expressions. They are interpreted as literal string values to match
against. For example, ng-switch-when="someVal" will match against the
string "someVal" not against the value of the expression
$scope.someVal.
So according to the docs take following example to solve your case:
<div ng-switch="hasUrl">
<span ng-switch-when="row.id.indexOf(':') < 0"> WONT SHOW </span> <!-- WILL NOT WORK EVER -->
<span ng-switch-when="makeItWork"> ALSO, WONT SHOW</span>
<span ng-switch-when="true">WILL NOT SHOW EITHER</span>
<span ng-switch-when="1">WILL SHOW</span>
</div>
Look carefullyat scope variables and their values:
$scope.hasUrl = 1; /* NOTICE != true BUT 1*/
$scope.row = {};
$scope.row.id = "true:";
$scope.makeItWork = $scope.row.id.indexOf(':') > 0 ? 1 : 0;
console.log($scope.makeItWork); /* SEE THAT TRUE WILL BE LOGGED BUT IT STILL WONT SHOW */
So even though ng-switch will evaluate an expression, it seems ng-switch-when wont. If I were you I would just stick to ng-if instead.
FIDDLE Fixed fiddle

Access scope from ng-template

Using AngularJS, I want to access scope variable from inside a <script type="text/ng-template".
<script type="text/ng-template" id="firstDialogId">
<div class="ngdialog-message" align="center" id="download">
<h4 ng-show=isFrench>Télécharger la cartographie</h4>
<h4 ng-show=isEnglish>Download cartography</h4>
<a href="../downloads/PDF/{{currentLanguage}}/{{currentCartography}}.pdf" download>
<img src="../style/images/pdf-icon.png" alt="Download PDF" width="30%" height="30%">
</a>   
<a href="../downloads/VSD/{{currentCartography}}.vsd" download>
<img border="0" src="../style/images/vsd-icon.png" alt="Download VSD" width="30%" height="30%">
</a>   
<a href="../downloads/PNG/{{currentLanguage}}/{{currentCartography}}.png" download>
<img border="0" src="../style/images/PNG-icon.png" alt="Download PNG" width="30%" height="30%">
</a>   
<div class="ngdialog-buttons">
<button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="closeThisDialog('button')">Close</button>
</div>
</div>
</script>
isFrench and isEnglish are 2 booleans from my controller.
Same for currentCartography and currentLanguage, they are strings from my controller.
I also tried with getter inside and outside of the controller, same result.

For those falling into the same issue :
Using ngDialog, we need to precise we want to use the scope.
In my case, I added the dialog open functions in my controller, I needed to edit the one I'm using in order to add the scope: $scope, line as follows :
$scope.openPlainCustomWidth = function () {
$rootScope.theme = 'ngdialog-theme-plain custom-width';
ngDialog.open({
template: 'firstDialogId',
controller: 'InsideCtrl',
className: 'ngdialog-theme-plain custom-width',
scope: $scope, // this line wasn't here before
closeByDocument: false
});
};

three things you can try
use ng-href instead of href
for ng-show remove double curly {{
if above two doesnt work use $parent (only if you are not using controller-as)

You are using ng-show incorrectly, it doesn't use {{}} expressions.
Try: ng-show="isFrench"
Beyond that it isn't clear what you are asking