<div>
{{vis}}
<div class="dsui-visuals-section" data-ng-show="vis"></div>
<div class="text-center col-sm-12" style="margin-top:200px" data-ng-show="!vis">404 NOT FOUND</div>
</div>
This is my template which is getting vis variable from a controller, based on that value I am showing two child div's presented.
But before getting vis variable 404 NOT FOUND template is loading.How to avoid this? Can anyone help to resolve this.
initialise the scope variable with a true value and use data-ng-hide="vis" instead of data-ng-show="!vis"
<div>
{{vis}}
<div class="dsui-visuals-section" data-ng-show="vis"></div>
<div class="text-center col-sm-12" style="margin-top:200px" data-ng-hide="vis">404 NOT FOUND</div>
</div>
and in the controller set the default value
$scope.vis=true;
Related
I have used [ngClass] in the past, applying classes depending on the Boolean value of a variable held in the javascript/typescript before. However I am wondering if it is possible to apply it based on a local HTML boolean value or not?
ie.
<div class="card" *ngFor="let item of data" #panel ngClass="{expanded: isExpanded}">
<div class="header">
<div class="itemName">Text</div>
<div class="itemDir">Some more text</div>
<mat-icon *ngIf="!panel.isExpanded" (click)="panel.isExpanded=true">edit</mat-icon>
<mat-icon *ngIf="panel.isExpanded" (click)="panel.isExpanded=false">cancel</mat-icon>
</div>
</div>
Here, I am displaying one of two icons, depending on the local isExpanded variable defined within the HTML and not the backend.
I am wanting to apply a class based on this value... is it possible?
Here is what I am working on
use like [class.expanded]="isExpanded". binding to class.expanded trumps the class attribute
<div class="card" *ngFor="let item of data" #panel [class.expanded]="panel.isExpanded" [class.notExpanded]="!panel.isExpanded">
you can use *ngIf="true as isExpanded" to make variable on the template
<div class="card" *ngFor="let item of [1,2,3,4];" >
<div class="header" *ngIf="true as isExpanded" ngClass="{expanded: !isExpanded}">
<div class="itemName">Text</div>
<div class="itemDir">Some more text</div>
<div *ngIf="isExpanded" (click)="isExpanded=!isExpanded">edit</div>
<div *ngIf="!isExpanded" (click)="isExpanded=!isExpanded">cancel</div>
</div>
</div>
stackblitz demo 👍👍
<div class="card" *ngFor="let item of data" #panel ngClass="{expanded: isExpanded}">
<div class="header">
<div class="itemName">{{item.name}}</div>
<div class="itemDir">{{item.directory}}</div>
<mat-icon *ngIf="!isExpanded;else other_content" (click)="isExpanded=true">edit</mat-icon>
<ng-template #other_content>Other Icon goes here</ng-template>
</div>
You can refer the above code which use If and else by template referenced variable which properly toggle between both icon and non Icon
Actually I am using pagination in web page,i am putting one condition ng-if="id !== 0" if this code is true then it will hide some portion if its false its showing that portion.My problem is if condition is false then it showing that portion but pagination is not working when i am clicking on next its not going to the word.but if i am using the same condition in ng-show its working fine pagination is also working.Please help me whats going on there i am unable to understand.
Here is my code..
<div class="orphan-navigation col-md-12" ng-show="totalOrphans !== 0">
<div class="col-md-2 pull-left orphan-count">
{{id}} / {{totalOrphans}}
</div>
<div class="navigation-button-container pull-right">
<uib-pagination total-items="totalOrphans" ng-model="id" max-size="limitPages" ng-change="orphanChanged()" items-per-page="1">
</uib-pagination>
</div>
</div>
<div class="col-md-12 orphan-text-label" ng-show="totalOrphans !== 0">
<div class="col-sm-3 label label-default pull-left orphan-key">Un-Annotated word</div>
<div class="col-xs-4 small-left-margin label orphan-key searchText">{{orphanData.orphan.attributes.text}}</div>
</div>
in above code i have used ng-show="totalOrphans !== 0" for ng-show my pagination is working fine when i am clicking in next button its highlighting other words.thats i want result.
but if i used ng-if instead of ng-show my pagination is not working,its not highlighting next word when i am clicking on next.
here i am attaching image of my web page.
if someone has still not understand my question please comment here ,i will try to clarify you thanks in advance,
ng-if will create it's own scope. Also uib-pagination creates it's own scope and probably use its parent scope to create your pagination. Now if the ng-if has it's own scope uib-pagination can't use the scope paramater from you controller.
For this reason there is the ControllerAs Syntax.
To use it you need to define it in ng-controller like: ng-controller="AppCtrl as vm".
Inside your controller you need to define 'vm' with 'this':
app.controller('AppCtrl', [function() {
var vm = this
vm.id = 5;
}]);
Now you can use the id inside the HTML like this:
<div ng-controller="AppCtrl as vm">
<span>{{vm.id}}</span>
</div>
As an example your code with ng-if that you provided need to look like this:
<div class="orphan-navigation col-md-12" ng-if="vm.totalOrphans !== 0">
<div class="col-md-2 pull-left orphan-count">
{{vm.id}} / {{vm.totalOrphans}}
</div>
<div class="navigation-button-container pull-right">
<uib-pagination total-items="vm.totalOrphans" ng-model="vm.id" max-size="vm.limitPages" ng-change="vm.orphanChanged()" items-per-page="1">
</uib-pagination>
</div>
</div>
<div class="col-md-12 orphan-text-label" ng-if="vm.totalOrphans !== 0">
<div class="col-sm-3 label label-default pull-left orphan-key">Un-Annotated word</div>
<div class="col-xs-4 small-left-margin label orphan-key searchText">{{vm.orphanData.orphan.attributes.text}}</div>
</div>
I have this html page where i havce included 4 templates and menu for each is given as tabs on top.
I want to change the width of tab(div) in col-sm- 4 to lets say col-sm-6 when an http.get() method returns true i.e success
here is the html menu code..
<div class="row">
<div class="col-sm-3 bg-success" ng-click="go('/AddBook')">
<h2>Add a Book</h2>
</div>
<div class="col-sm-3 bg-info" ng-click="go('/SearchBook')">
<h2>Search a Book</h2>
</div>
<div class="col-sm-3 bg-success"
ng-click="getAllBooks(); go('/ViewAllBooks')">
<h2>View All Books</h2>
</div>
<div class="col-sm-3 bg-info" ng-click="go('/RequestBook')">
<h2>Request a Book</h2>
</div>
</div>
Here is the snapshot of the html page ....
now when an http.get() method succeeds , i want to change the width of searchbook, request book and view all books to change..
Read the $http documentation at https://docs.angularjs.org/api/ng/service/$http#get
In [config] you can pass success and error functions.
Much like this:
get(url,
function(data){
$scope.getSuccessful = true;
},
function(errorData){
$scope.getSuccessful = false;
}
);
After the call, success/error should be called. Then set the value of the class in html.
<div class="{{getSuccessful ? 'col-md-2' : 'col-md-10'}}" ng-click="go('/RequestBook')">
<h2>Request a Book</h2>
</div>
Hi you can try something like.
ng-class="{ 'col-md-6' : expression }"
Check the docs for this https://docs.angularjs.org/api/ng/directive/ngClass
Put promises on http.get() and on success assign a true value to a scoped variable and then in the Ui use ng-class as stated by adeel_s
The html code goes something like this:
<div ng-if="name=='John'">
<div class="item item-avatar"> <img ng-src="john.jpg"></div>
</div>
<div ng-if="name=='Margaret'"
<div class="item item-avatar"> <img ng-src="margaret.jpg"></div>
</div>
Instead of ng-if, I've tried using ng-show as well. Neither worked. Both John as well as Margaret showed on the page no matter which I used. I tried with ng-switch also.
The variable 'name' I initialized earlier on the same HTML file as:
<a class="item item-avatar item-icon-right" ng-init="name = 'John'" href = "#/Page3"></a>
Clicking on the above line leads to Page3 where I need to display either John or Margaret depending on the value of 'name'.
Is the syntax wrong or something, because that could be very well possible. I'm new to Ionic and AngularJS.
Try this:
<div ng-show="name=='John'" ng-init="name = 'John'">
<div class="item item-avatar"> John</div>
</div>
<div ng-show="name=='Margaret'"
<div class="item item-avatar"> Margaret</div>
</div>
Works for me. I just change ng-if to ng-show - which will shows div content when true and hide it otherwise. I also use ng-init inside a div.
Are you sure you started Angular? Did you set the ng-app directive?
It would help if you could provide a working example if you have other problems.
angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-init="name = 'John'">
<button type="button" ng-click="name='John'">John</button>
<button type="button" ng-click="name='Margaret'">Margaret</button>
<div ng-if="name=='John'">
This is John
</div>
<div ng-if="name=='Margaret'">
This is Margaret
</div>
</div>
I fixed you plunker - now it should be working.
Bug #1: ng-init is for initialization not to set values at runtime -> use ng-click instead
Bug #2: You use the same controller for all pages but for each page a new controller will be initialized, which resets the 'name' property
I implemented a setName function to set the name in the rootscope and to go to page3. In a correct implementation you should pass the name as a $stateparam to the new state/page. But for that please have a look at the ui-router documentation.
$scope.setName = function(name) {
console.log(name);
$rootScope.name = name;
$state.go('Page3');
};
Below I have a for-each loop using knockout.js.
<div data-bind="foreach:Stuff">
<div class="row">
<span data-bind="text: $data.name"></span>
</div>
</div>
I need to have the HTML Element with an id or name or something that reflects a unique value related to the $data.name value, as another method runs asynchronously, and needs to know which HTML element to update.
Ideally, it would look something like this, I guess:
<div data-bind="foreach:Stuff">
<div class="row">
<span id="data-bind='text: $data.name'" data-bind="text: $data.name"></span>
</div>
</div>
I have found a knockout syntax that applies values during runtime to specified attributes:
<div data-bind="foreach:Stuff">
<div class="row">
<span data-bind="attr: { id: $data.name}"></span>
</div>
</div>
Are you looking for this
<div data-bind="foreach:Stuff">
<div class="row">
<span data-bind="text: $data.name,attr:{id:$data.name}'"></span>
</div>
</div>
Here name is a observable i believe when ever there is change in name in stuff it will automatically updates its value & attr:{id}just to give a dynamic id to element using available bindings .