I have a angular js application, in which I am retrieving http response data using rest services. I want to conditionally display the part of the page. For eg: if the response data in angular is "manager" , the page should have different options displayed and if the response data is "employee" , same part of webpage should display different options.
How do I do that?
This is single page application.
For your requirement you can use ng-switch directive. The ngSwitch directive is used to conditionally swap DOM structure on your template based on a scope expression.
For your example:
<div ng-switch="expression">
<div ng-switch-when="manager">...</div>
<div ng-switch-when="employee">...</div>
</div>
Here expression will contain info you get from response data of either manager or employee.
Hope this will be helpful to you!
You can use ng-show directive like:
<div>
<div ng-show="employeeType == 'Manager'"> </div>
<div ng-show="employeeType == 'employee'"> </div>
<div>
For more information refer to this link: https://docs.angularjs.org/api/ng/directive/ngShow
Related
I am trying to get a value from the lists of array from the api and use a v-if to display in the view page.
For example:
I have the response from api like this upon doing console:
list: [ "user:getAll",.................................................., __ob__: Observer]
Now i want to display some text in a box, i am displaying using like this:
<div>
<div v-if="!list === 'place:list'">
Do not show
</div>
<div v-else>Show</div>
</div>
Issue is v-if is not working i guess as it is not getting the place:list
Please suggest
You're comparing an array to a string. I'm guessing what you mean to do is check if the string 'place:list' is in the list array?
<div>
<div v-if="!list.includes('place:list')">
Do not show
</div>
<div v-else>Show</div>
</div>
I'm using Angular 5 and I have this ngFor:
<div class="row margin-v-20">
<my-tile [routerLink]="['/secondPage', item.id, 'item-list']" *ngFor="let item of listaOfItem" [item]="item"></my-tile>
</div>
and I need to access from the routed component "secondPage/:id/item-list" to the json object "item" of the list.
How can I achieve this?
This article explains several ways to achieve this. I recommend to use a service to share the complex data between components ("Using Application Providers" section in the article).
I am working on converting a html to angular js and one of the issue i have is, a button on the page uses ID and based of that id there is a div class that runs set of texts to be displayed accordingly.
Code that we have is something like this.
Continue
From the HTML page when the user clicks on the button continue... below code will be executed.
<div class="ContinueClicked">
text.......
</div>
I am trying to figure out a way to see how i can make it work with angular js. So when the user is clicking on the continue button, the page should display the content in div continueClicked. Should i be using any directive here? please help.
You have to adhere to AngularJS principles and conventions. Angular uses Directives for most of the DOM transformations, and Bindings for constant DOM and Model updates (two-way data bindings.)
In your case scenario you might want to have the following DOM elements (inside a Controller inside an ng-app Module, see AngularJS docs):
<!-- The button with the event handler as ng-click directive -->
<button ng-click="isContinue = true">Show continue content</button>
<!-- The content wrap with ng-show directive -->
<div class="ContinueClicked" ng-init="isContinue = false" ng-show="isContinue">
My content to be shown
</div>
You can also read and practice basic concepts following the Angular Tutorial.
I have a directive structure that I'm using to simplify the user interface. The implementation of the directives should handle the complexity. The directive structure is as follows:
<re-widget id="widget_html_content">
<re-list name="HtmlContent" query="all">
<re-items each="item">
<div>
<span> {{item.content}} </span>
</div>
</re-items>
</re-list>
</re-widget>
The above should generate HTML of the following flavor:
<div id="widget_html_content">
<div ng-controller="ListCtrl" name="HtmlContent" query="{}" class="HtmlContent">
<div ngRepeat="item in ListCtrl.items">
<div item="item" ng-controller="ItemCtrl">
<div>
<span> {{item.getContent()}} </span>
</div>
</div>
</div>
</div>
</div>
This is basically a transformation task (transform the directive HTML to the standard HTML) with some caveats. The following are the requirements:
(1) the re-widget creates isolated scopes since it can be reusable in the page, possibly with the same data input
(2) The re-list tag transforms itself to use a ListCtrl, which the ListCtrl knows how to get the list data by using the input NAME and QUERY attributes/parameters
(3) the re-items tag displays each item in the list by using its inner template defined by the user. So basically it is an ng-repeat over the list items. However, each item ng-repeated will have its own ItemCtrl controller instance. The ItemCtrl instance would get a reference to the item model and data so that it can expose an API for the item data. Note: the item model is the value of the each attribute in the re-items tag.
I have a plunkr with most of the code at http://plnkr.co/edit/Ja0uDb630RYsSjVOGNRb?p=preview
Any help is greatly appreciated!
How to compare string with request parameter in html in Thymeleaf tag "th:if" ?
right now i am using this
<div class="error" th:if="${param.error == 'badCredentialsException'}" th:with="errorMsg=#{login.badCredentials}">
<p class="errorMsg"><span th:text="${errorMsg}"></span></p>
</div>
But no luck, it is not working.
It's not working because param.error is array of strings. You must retrieve first element of array (param.error[0]) to get first value of parameter (see documentation). Besides that you can access request parameter via Web context object method #httpServletRequest.getParameter that returns first value when parameter is multivalued (see documentation).
Usage of Web context namespaces for request attributes
<div class="error" th:if="${param.error[0] == 'badCredentialsException'}" th:with="errorMsg=#{login.badCredentials}">
<p class="errorMsg"><span th:text="${errorMsg}"></span></p>
</div>
Usage of Web context object
<div class="error" th:if="${#httpServletRequest.getParameter('error') == 'badCredentialsException'}" th:with="errorMsg=#{login.badCredentials}">
<p class="errorMsg"><span th:text="${errorMsg}"></span></p>
</div>
With Thymeleaf 3, I normally use #request (a short form of #httpservletrequest) and #strings.equals() for that, which will look like this:
<div th:if="${#strings.equals(#request.getParameter('error'), 'badCredentialsException')}"></div>
This worked well for me
#strings.equals(string1, string2)