Hey I have two JSP pages that are step(s) 1 & 2 of a form. On step 1 I am displaying certain category options a user can choose from. In order for the user to get to step 2, they must click one of the category options and upon going to step 2, I am trying to display the name of the category that they clicked on. I know with ng-model, one can bind it to an input and display what is interacted in that input but for some reason it is not working if I bind the ng-model to a "p" or "span". I am new to AngularJs so please bare any rookie mistakes.
step_one.jsp
<div class="col-sm-6" ng-click="setStep(2)"><span class="glyphicon glyphicon-cutlery"></span>
<p ng-model="category">Cutlery & Service</p>
</div>
step_two.jsp
<div class="col-md-12">
<label for="requestCategory">Category:</label>
<p id="requestCategory" ng-model="category">{{category}}</p>
</div>
JS to switch steps:
$scope.setStep = function (step){
$scope.step = step;
};
$scope.isStepSet = function(step){
return ($scope.step === step) ;
};
Are you intermingling server vs client side development?
You have 2 JSPs, which I'm assuming each load AngularJS? The majority of Angular apps work with a single page (i.e. one JSP) and dynamically load/show different content (i.e. through angular views). Single page applications (SPAs) maintain state within a single page and Angular provides constructs to do this with $scope (you can also use localStorage to do this).
It looks like you're transitioning from a classic web/server-side development model to a client-side model. To do what you want to do above, you can keep everything in 1 JSP and use the following code:
HTML
<div ng-show="isStepSet(1)" ng-init="setStep(1)" class="col-sm-6" ng-click="setStep(2)"><span class="glyphicon glyphicon-cutlery"></span>
<p ng-model="category">Cutlery & Service</p>
</div>
<div ng-show="isStepSet(2)" class="col-md-12">
<label for="requestCategory">Category:</label>
<p id="requestCategory" ng-model="category">{{category}}</p>
</div>
Related
I am trying to build a star ranking purely in an angular template file without using controllers, I have the following code which fails, I can build this using controllers (calling setRanking method ng-click) but I want to understand why the following code is not working. User should be able to click on a star and all the stars up to the selected star should be highlighted.
<div class="item" ng-init="user_rating = 0">
<i
ng-repeat="star in [1,2,3,4,5]"
ng-class="(star>user_rating) && 'ion-ios-star-outline' || 'ion-ios-star'"
ng-click="user_rating = star"></i>
<h3>Starts: {{user_rating}} </h3>
</div>
I think the issue is with the scope of the user_rating(as it is not getting updated).
As each ng-repeat creates the isolated scope, so the way you are updating user_rating is creating a local copy of user_rating associated to the local scope of each ng-repeat.
To fix it you can replace the code
ng-init="user_rating = 0"
with
ng-init="r={}; r.user_rating = 0;"
Also refer user_rating with r.user_rating wherever you are referring user_rating.
Also the correct way of using ng-class is what #Shailendra mentioned in his answer. Thanks!
You need to make changes in this code for 'ng-class' as like below-
<div class="item" ng-init="user_rating = 0">
<i
ng-repeat="star in [1,2,3,4,5]"
ng-class="star>user_rating? 'ion-ios-star-outline': 'ion-ios-star'"
ng-click="$parent.user_rating=star;"></i>
<h3>Starts: {{user_rating}} </h3>
</div>
I Hope this may help you..
In need the data from a ng-repeat on two places within the view. The code below works, but I am not sure if this is the way to do it. (I am new to Angular).
If a user clicks on a outlet-option the outlet-products get displayed. First I loaded the products below the outlet-option and used jQuery to move to the productsWrapper if a user clicks on an option. But then I needed to compile it again which made it a bit messy in my opinion.
There can be only one "#productsWrapper" and one ".outlet", so I came up with using the ng-repeat twice. But is this the way to go?
<div id="productsWrapper">
<div ng-repeat="element in elements track by $index" class="products" style="display: none;" id="prod-{{element.wonelement_id}}">
<outlet-product ng-repeat = "option in element.options"
class = "product"
option-data = "option"
element-data= "element"
chosen-data = "chosen">
</outlet-product>
</div>
</div>
<div class="outlet">
<div ng-repeat="element in elements track by $index">
<outlet-option
element-data = "element"
option-data = "element.option"
chosen-data = "chosen"
app-settings = "app">
</outlet-option>
</div>
</div>
I think what you proposed looks fine in a typical AngularJS way.
If you were applying filters to the ng-repeat clause, then I would have suggested applying that filter ahead of time in the controller so that it would only be run the one time. But since you are using no filters at all on the data, I think it is fine as you have it.
In my application the index page is like
<div ng-if="isLoggedIn>
<div ng-view>
</div>
<div ng-if="!isLoggedIn">
<div ng-if="type==='admin'">
<div ng-view>
</div>
</div>
<div ng-if="type!=='admin'">
<div>.....</div>
<div ng-view>
</div>
</div>
</div>
So basically i have different ng-views for different views. The problem here is when user is not logged in ,login page is displayed using ng-view.But upon login the ng-view initializes with login page again (may be becoz of $route.current is already set).
When user clicks log in button he/she is directed to home page and again redirected to login page. so no change is displayed on the page.
This issue can be solved using ng-show/hide insted of ng-if. But that creates another issue that controllers are called twice becoz of two ng-view in the dom and also element can't be referred using id becoz two elements are generated fro the same id. So this solution can't be used.
Is there any way of solving it?
Multiple & Nested ng-view won't work on the same page.
You need take a look at angular ui-router which would be great to use in your case, you could also use nested ui-view using angular ui-router
Or may be you can avoid ng-if using ui-router
Would like to know the best way to preserve state between tabs. I use bootstrap tabs and angular ui-router. I've a google map in one of the tabs and don't want to reload the map when user selects that tab. Please advise.
Thanks
I think what you are looking for is discussed in this issue: https://github.com/angular-ui/ui-router/issues/63
They are mostly discussing iframes but I believe the same should hold for Google Maps. Unfortunately in the thread they decided that this isn't something that should be implemented in the core release. I haven't tried out the directive they provide (if I get a chance I'll let you know how it goes) but you may be able to get something working with that.
I have actually come across the exact problem you had. My solution was to use styled buttons as my tabs and ng-show for the map tab:
<div id="info-btns">
<button class="btn" ng-model="view" btn-radio="'info'">
Info
</button>
<button class="btn" ng-model="view" btn-radio="'map'" ng-click="loadMap()">
Map
</button>
</div>
<div class="content" ng-show="view != map">
<div ui-view="info"></div>
</div>
<div id="map-container" ng-show="view == 'map'">
<div id="map" class="content" sitemap>
</div>
</div>
ng-show simply uses display:none to hide the map and hence doesn't cause a refresh. You will need to trigger the map to load the first time it is not hidden otherwise it will render incorrectly, hence loadMap()
If I get a chance I'll set up a jsfiddle of this in practice.
I have a store webpage and I want to add product blocks when user scrolls down (by infinite scrolling).
Which method should I use to fetch data from server and add it to the dom?
I saw this fiddle for implementing infinite scrolling in angularjs (it runs a loadMore() function when user arrives to end of page), as mentioned above, blocks are store's product and every item should have different scope.
The problem is that I don't know how to structure data in a scope and adding more items to it by ajax requests in the loadMore() function.
My products template:
<section class="more-apps">
<h1>More recommendations</h1>
<div class="loadmore-these">
<!-- ajax requests will load more instances of these three templates -->
<div data-ng-include data-src="'products-template-1.html'"></div>
<div data-ng-include data-src="'products-template-2.html'"></div>
<div data-ng-include data-src="'products-template-3.html'"></div>
</div>
</section>
and every sub-template file is like this with some simple differences:
<section data-ng-repeat="i in [1,2,3,4]">
<h1 data-ng-bind-html="title"></h1>
<div data-ng-bind-html="about"></div>
</section>
Every product has different title and about variables in (it's own?) scope.
I suggest you go through the angularjs official tutorial (basically it's about what you want to do, list products from a webstore) , and specifically the step about $http and services :
http://docs.angularjs.org/tutorial/step_05
If you structure your service to download a range of products according to how much the user scrolled (as in the example you linked to) you should be set.