I am working on a web app and I need to display if something is being backed up or not and want to start off by just displaying a boolean value in the column.
Right now, this is some of what I have:
JS:
$scope.backupStatus = false;
$scope.enableBackup = function() {
$scope.selectedProject.backupStatus = true;
};
$scope.disableBackup = function() {
$scope.selectedProject.backupStatus = false;
};
HTML:
<div class="ui-grid-cell-contents">
<div layout="row" layout-align="start center">
<span>{{selectedProject.backupStatus}}</span>
</div>
</div>
Obviously, what I have right now is not working and nothing is being displayed in the column. I am just wondering what conventions I need to follow to get this to display in the column.
To clarify: The enableBackup and DisableBackup functions are being called when there is a button that is clicked in a different part of my grid
I believe the confusion is it isn't immediately clear that you are using ui-grid. I suggest clearing that up / adding the 'angular-ui-grid' tag.
This should work:
<div class="ui-grid-cell-contents">
<div layout="row" layout-align="start center">
<span>{{ grid.appScope.selectedProject.backupStatus }}</span>
</div>
</div>
You have to initialize $scope.selectedProject
$scope.selectedProject = {};
$scope.selectedProject.backupStatus = false;
$scope.enableBackup = function() {
$scope.selectedProject.backupStatus = true;
};
$scope.disableBackup = function() {
$scope.selectedProject.backupStatus = false;
};
Related
I need some advice. I'm trying to load some videos. The problem is that if I load two or more videos, I can't play them, only works if I load one.
I think the problem is because I need a kind of ID for each one.
How can I generate ID and pass them like a parameter of ng-click using angularjs?
Here is my code:
player.html
<div id="image-section" ng-click="click()">
<div id="video-section" class="wide-rail-item" ng-if="ready">
<div>
<player content="content"></player>
</div>
</div>
</div>
directive.js
$scope.ready = false;
$scope.click = function(){
var showPlayer = function() {
$scope.ready = true;
};
}
I've set a value when the user click vote choice. Its working.
.then(function(response) {
localStorage.setItem('isClicked', 'Yes');
var i = +localStorage.key("nid");
var nidId = 'nid' + localStorage.length;
localStorage.setItem(nidId, vm.nid);
vm.clickedBefore = true;
})
This is my HTML scope:
<div class="card myfunc" ng-repeat="myfunc in myfuncPage.myfuncs" id="{{myfunc.nid}}" >
<div class="item item-text-wrap">
<h2 class="item-icon-left"><i class="icon ion-ios-analytics"></i>
{{myfunc.title}}</h2>
</div>
<div class="item item-text-wrap" ng-show="localstorage">
<img ng-src="{{myfunc.field_image.und[0].imgPath}}"/>
<p class="custom-class" ng-bind-html='myfunc.body.und[0].value'>
</p>
<ul ng-repeat="vote in myfunc.advmyfunc_choice">
<li ng-repeat="voteselect in vote">
<div class="row">
<button class="col button button-outline button-dark" ng-click="myfuncPage.sendNid(myfunc);myfuncPage.sendVote(voteselect);showVoted = ! showVoted" >{{voteselect.choice}}</button>
<div class="voted-screen" ng-show="showVoted">
<h3>Thanks.</h3>
</div>
</div>
</li>
</ul>
</div>
</div>
In basically, I need remember the div via localStorage and when the page refresh, hide choice divs.
ng-show="showVoted" working on click but I need on refresh.
What is the best way to do it? Thanks.
I am not sure what local storage module you are using, so I can't be specific, but I would write factory that handles the retrieval and storage of the values you need
(function () {
var voteFactory = function (localStorage) {
return {
getVote: function (key) {
var isVoted = false;
// get local storage item, set voted etc
var voted = localStorage.getItem(key);
if(voted) {
isVoted = voted;
}
return isVoted;
},
setVote: function(key, value) {
localStorage.setItem(key,value);
}
};
};
app.factory('voteFactory', ['localStorage', voteFactory]);
})();
Then within the scope controller/directive you are using to show or hide you would have a function:
$scope.showVoted = function(key) {
return voteFactory.getVote(key);
}
then ng-show="showVoted(theidentifieryouwantouse)"
It is also worthwhile to mention I would use ng-if instead of ng-show. To be more efficient you could store your votes as an array instead of individual values and do a check to see if you have retrieved all values, get from local storage if not. Then your functions would interrogate retrieved array instead of repeated calls to local storage. I would also advice maybe using a promise in the factory because retrieval from local storage could be delayed causing some ui oddities.
Hopefully this is along the lines of what you are looking for. I can elaborate if needed.
I'm having a problem where despite a list being updated, ngRepeat does not display the information.
In the code below, the $scope.selectedImages array is being added to when images are selected using the file input. It is set up so that only unique files will be added to the list of selectedImages (no duplicates).
At the end of the function, scope.selectedImages prints the array with the new values, but in the view, ngRepeat does not add the new list items with the image names.
Other questions regarding this issue said that $scope.$apply should fix the problem, but for me it is not. Am I using it wrong or is there something else that I am misunderstanding.
EDIT: View 1 and View 2 are in separate HTML pages that both rely on the same controller.
View 1:
<input type="file" multiple accept="image/*" class="file-input" id="img-upload-btn" onchange="angular.element(this).scope().select(this)">
<md-button class="md-primary md-raised sidenav-btn" ng-click="proxy('img-upload-btn')">
Select <strong>Images</strong>
</md-button>
The proxy function allows the md-button to click the input.
View 2:
<div layout-padding flex ng-controller="upload-controller">
<ul>
<li ng-repeat="im in selectedImages">{{im.name}}</li>
</ul>
</div>
Controller:
$scope.selectedImages = [];
$scope.select = function(element) {
$scope.$apply(function(scope) {
var justFiles = $.map(element.files, function(val, key) {
return val;
}, true);
var fileEquality = function(f1, f2) {
if (f1.name != f2.name) return false;
if (f1.size != f2.size) return false;
if (f1.type != f2.type) return false;
if (f1.lastModified != f2.lastModified) return false;
return true;
}
// inefficient, find better way later
for (i in justFiles) {
var contains = false;
var file = justFiles[i];
for (i in scope.selectedImages) {
if (fileEquality(file, scope.selectedImages[i])) {
contains = true;
break;
}
}
if (!contains) scope.selectedImages.push(file);
}
console.log(scope.selectedImages);
});
};
Your input field template and controller template have to different scopes. Use $rootScope.selectedImages in your case.
I am doing a functionality of selecting an image from the image list. I have a button "select" from every button and call selectImage method on button-click.
AngularApp:
app = angular.module("BlogImageApp", []);
app.controller("BlogImageController", function($http, $scope){
$scope.selectedImageId = null;
$scope.selectedImageUrl = "";
$scope.selectImage = function(image_id) {
$scope.selectedImageId = image_id;
var params = 'id='+image_id;
$http.get('/blog/image/get-url-by-id?'+params).success(function(data){
$scope.selectedImageUrl = data;
});
}
});
// registers the BlogImageApp in the view
angular.bootstrap(document, ['BlogImageApp']);
The view:
<div id="blog-images" ng-controller="BlogImageController">
<div ng-show="selectedImageId == null" style="height:50px; margin-bottom:5px;">
<div class="alert alert-info">
<span class="glyphicon glyphicon-info-sign"></span>
The image isn't selected!
</div>
</div>
<div class="blog-selected-image" ng-hide="selectedImageUrl == ''">
<b>The selected image: <span ng-bind="selectedImageUrl"></span> </b><br/>
<img ng-src="{{selectedImageUrl}}" class="img-thumbnail" style="height:200px">
</div>
...
PJAX PART GOES HERE WITH GRID AND PAGINATION
and button with ng-click="selectImage(39)" for every item
PJAX PART ENDS
And after all in javascript:
var ngRefresh = function() {
var scope = angular.element(document.body).scope();
var compile = angular.element(document.body).injector().get('$compile');
compile($(document.body).contents())(scope);
scope.$apply();
}
// PJAX
$(document.body).on('pjax:success', function(e){
ngRefresh();
});
After pjax call I have some strange behaviour. When I click a select button, selectImage method is invoked. It changes selectedIMageUrl and I can see different url in span every time I click select button. But the image (where ng-src specified) doesn't change.
Image changing worked great before pjax call though.
PS: I understand, that it would be better to do jsFiddle snippet, but I would have problem with server side.
I want to toggle my 2 on & off images when I click on my lightbulb. Sometimes it seems to work and other times it does not. I cant get the ng-click to work at all unless I use ng-repeat and at least two images. How do I best accomplish toggling the images for 1 lightbulb? Is there any way to synchronize the checkbox so that when it is checked the light goes on and when it is off the light goes off? (I am new to javascript)Here's the fiddle:
Fiddle
<body ng-app="myApp">
<div ng-controller="MyCtrl">
lightbulb is {{state}} <input type="checkbox" ng-model=
"state" ng-true-value="on" ng-false-value="off">
<div ng-repeat="image in images">
<a ng-click="toggleImage(image)">
<img ng-src="{{image.imgUrl}}" />
</a>
</div>
</div>
function MyCtrl($scope) {
//$scope.checkboxState = "off";
//$scope.resetUrl = 'http://www.w3schools.com/js/pic_bulboff.gif';
$scope.state = "on";
$scope.onUrl = 'http://www.w3schools.com/js/pic_bulbon.gif';
$scope.offUrl = 'http://www.w3schools.com/js/pic_bulboff.gif';
$scope.images = [
{imgUrl: 'http://www.w3schools.com/js/pic_bulboff.gif'},
{imgUrl: 'http://www.w3schools.com/js/pic_bulbon.gif'},
];
$scope.toggleImage = function (image) {
if (image === $scope.offUrl) {
image.imgUrl = $scope.onUrl;
} else {
image.imgUrl = $scope.offUrl;
}
};
}
The easiest way to toggle something is to store the state in your scope and then render based on that. Right now you have a lot of extraneous code that could be eliminated. I would restructure your code to something like:
function MyCtrl($scope) {
$scope.onUrl = "pic_bulbon.gif";
$scope.offUrl = "pic_bulboff.gif";
$scope.isBulbOn = false;
$scope.bulbText = function() { return $scope.isBulbOn ? "on" : "off"; };
$scope.bulbUrl = function() {
return $scope.isBulbOn ? $scope.onUrl : $scope.offUrl;
};
}
<body ng-app="myApp">
<div ng-controller="MyCtrl">
lightbulb is {{ bulbText() }}
<input type="checkbox" ng-model="isBulbOn">
<a ng-click="isBulbOn = !isBulbOn">
<img ng-src="{{ bulbUrl() }}" />
</a>
</div>
</body>
You can check out the Fiddle here: http://jsfiddle.net/UYaLJ/
There was an issue with the ifcondition. The ng-repeat works on the JSON object. Hence, the function parameter 'image' is an object. The correct if statement is as follows:
if (image.imgUrl === $scope.offUrl) {
I have updated the fiddle. URL is:http://jsfiddle.net/7857c/1/