I am building an application with angularui. I have aa span that contains an image that I need to toggle on and off and save the state on when user hits save. How do I get the toggle state of this element?
Here's my code:
<div class="scrollable" ng-controller="UpdateProspectCtrl">
<div class="scrollable-content section">
<form role="form" ng-submit='updateProspect()'>
<fieldset>
<p ui-state="pinProspect" ng-model="pinprospectpara"
ui-class="{'text-primary': pinProspect}"
class="text-default">
<span ng-model="pinprospect" style="font-size: 40px; display: block;"
class="fa fa-paperclip" ui-toggle='pinProspect'
ui-class="{'active': pinProspect}" ng-click="setPinned()"></span>
</p>
</fieldset><hr>
<button class="btn btn-primary btn-block">
Save
</button>
</form>
</div>
Controller:
angular.module('Main', [
'mobile-angular-ui.core.sharedState'])
.controller('UpdateProspectCtrl', function($scope){
// set the state here on click of the toggelable span.
$scope.setPinned = function() {
$scope.updateProspectPinned = !$scope.updateProspectPinned;
console.log("setting pinned to", $scope.updateProspectPinned);
};
// Using the above function I am able to guage the state. However, next time when I load this page I want to set the last state. If the user had selected it, I want to show it as selected. How do I achieve this behavior?
})
Also, even though I have given it an ng-model I am unable to access it in my controller. I can access all the remaining elements of the page except for this span and its container p tags. What could be the issue?
You shouldnt bind ng-model directive to anything else but inputs and textareas, it is not meant for a span, if you want to display the model use - {{updateProspectPin}}
The ng-click directive should be the one responsible for toggling the value.
If you want to save the state you should open an angular service which is a singleton, and store the saved state there.
New service -
function pinnedStateService (localStorageService) {
var service = this;
service.pinState = { value: getPinStateFromLocalStorage()};
service.toggleState = function () {
service.pinState.value = !service.pinState.value;
localStorageService.set("pinItem", this.pinState.value);// i am not sure this is the correct syntax
}
function getPinStateFromLocalStorage() {
return localStorageService.get("pinItem"); // i am not sure this is the correct syntax
}
}
function controller(pinnedStateService){
$scope.pinState = pinnedStateService.pinState;
$scope.toggleState = pinnedStateService.toggleState; // binding function to scope so you can use it on the view
}
in the view -
<element ui-class="{'active': pinState}" />
Good luck
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.