I want to hide the button if it's the delete folder and show if it's the inbox. The code below does not work as the button is always shown.
<div class="message-footer-height" >
<div class="custom-div-class" ng-click="" >
<button class="custom-btn-default"
ng-hide="messageState.details && itemTappedValue = 'delete'"
ng-class="{ 'msg-btn' : userMessageDetails.id === -1 }"
ng-click="deleteMessage()" >
{{"button.delete"|translate}}
</button>
</div>
</div>
Thanks
You need to use ==, == is loose equality and === is strict equality. Read more here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness
<div class="message-footer-height" >
<div class="custom-div-class" ng-click="">
<button class="custom-btn-default"
ng-hide="messageState.details && itemTappedValue == 'delete'"
ng-class="{ 'msg-btn' : userMessageDetails.id === -1 }"
ng-click="deleteMessage()">
{{"button.delete"|translate}}
</button>
</div>
</div>
You need double equal sign here itemTappedValue = 'delete'
Related
<button class="footer-bar-item item-right button button-clear" ng-hide="taskDetails.task_id == '2044'">
<button class="button" ng-click="addNote(taskDetails.task_id)">Add Note</button>
</button>
taskDetails.task_id value is String and its value is equal to "2044".But button not hides.I'm new to Ionic.I'll grateful if someone can help me to resolve this.
Based on your code snippet, those quotation marks aren't parsable.
Change
ng-hide=”taskDetails.task_id == '2044'”
to
ng-hide="taskDetails.task_id == '2044'"
finally I found solution.
<button class="footer-bar-item item-right button button-clear" >
<button ng-hide="taskDetails.task_id == '2044'" class="button" ng-click="addNote(taskDetails.task_id)">Add Note {{taskDetails.task_id == '2044'}}</button>
</button>
I have a webpage which displays contents of a folder/directory upon clicking on it. If the contents of a folder has files, then download button is activated. If the contents of the folder is a directory, download button is inactive.
Here is my code that is supposed to make that work. But the Download button remains active all the time and never goes inactive. Can somebody point out where I'm going wrong ?
$scope.IsFile = function(filenames){
forEach(filenames, function(filename){
if(filename.indexOf(".zip") > 1|| filename.indexOf(".txt") >1 || filename.indexOf(".xml") > 1 ) {
return true;
}
else {
return false;
}
});
};
<div class="col-md-3" id="CTP Jobs">
<div ng-click="GetListOfFilesonCTP('/home/topas/rda_app/JOBS/')">
<a href="">
<h3>
JOBS <small> <span class="btn-group"
role="group">
<button type="button" class="btn btn-default" ng-disabled="IsFile(listOfFilesOnJobs)"
ng-click="download()">Download</button>
</span>
</small>
</h3>
</a>
</div>
<table class="table table-striped"
ng-init="GetListOfFilesonCTP('/home/topas/rda_app/JOBS')">
<tr ng-repeat="jobs in listOfFilesOnJobs"
ng-click="GetListOfFilesonCTP(getPath('/home/topas/rda_app/JOBS/', jobs))">
<!--'/home/topas/rda_app/JOBS/'+ jobs + '/' -->
<td>{{jobs}}</td>
</tr>
</table>
</div>
Your IsFile function does not return anything explicitly (i.e. it returns undefined) and ng-disabled interprets that as false. The return true and return false on lines 4 and 7 are relative to the function passed to forEach, which is probably not what you want. Did you mean to filter the list of files and check if any files are remaining? Something like this would do:
$scope.isFile = function(filenames) {
return filenames.filter(function(filename) {
return filename.indexOf(".zip") > 1 ||
filename.indexOf(".txt") > 1 ||
filename.indexOf(".xml") > 1
}).length > 0
}
Why my app isn't working properly? It must show one (one at time) of the div on the bottom with the "ng-if" tag..
This is the fiddle:
Fiddle
<div class="fix" ng-if="showAdd()">
<button type="button" class="btn btn-link">
<span class="glyphicon glyphicon-plus"></span>
<span class="fix">Aggiungi un Preferito</span>
</button>
<div class="add">
Aggiungi un Preferito
</div>
</div>
<div class="edit" ng-if="showEdit()">
Modifica
</div>
The problem is with the showEdit() function.
From your fiddle you have:
function showEdit() {
return $scope.startEdit && !$scope.startAdd;
}
Where startEdit and startAdd are defined as:
function startAdd() {
$scope.addBookmark = true;
$scope.editBookmark = false;
}
function startEdit() {
$scope.editBookmark = true;
$scope.addBookmark = false;
}
When your ng-if calls showEdit() it will return $scope.startEdit && !$scope.startAdd;
However, $scope.startEdit and $scope.startAdd are functions, so they will be "truthy" (i.e. evaluate to true in a boolean expression). Therefore, the boolean expression always evaluates to false (and your DIV remains hidden).
See below:
$scope.startEdit && !$scope.startAdd;
true && !true
true && false
false
It looks like you're missing something conceptually with either calling functions or with evaluating boolean expressions.
If you want to call a JavaScript function, you have to follow the name of the function with parenthesis, just like you did with your ng-if="showEdit()" block.
Similarly, if $scope.showEdit() is meant to call startAdd() and startEdit(), you should do something like this:
function showEdit() {
return $scope.startEdit() && !$scope.startAdd();
}
You'd still have a problem, however, as startEdit() and startAdd() don't return anything, and would therefore evaluate to undefined.
If you edit your showEdit() function as described above and have startEdit() and startAdd() return a boolean expression, you should be good to go.
It looks like there's a mistake in your fiddle. The edit div will show up if you change your showAdd and showEdit methods to the following:
function showAdd() {
return $scope.addBookmark && !$scope.editBookmark;
}
function showEdit() {
return $scope.editBookmark && !$scope.addBookmark;
}
The add div never gets added because that would be activated by the startAdd function, which isn't called anywhere.
Also, please post your javascript code here. That way, if something happens to your fiddle, this question might still be useful to others.
EDIT:
To get your add button to work you need to change this:
<div class="fix" ng-if="showAdd()">
<button type="button" class="btn btn-link">
<span class="glyphicon glyphicon-plus"></span>
<span class="fix">Aggiungi un Preferito</span>
</button>
<div class="add">
Aggiungi un Preferito
</div>
</div>
To this:
<button type="button" class="btn btn-link" ng-click="startAdd()">
<span class="glyphicon glyphicon-plus"></span>
<span class="fix">Aggiungi un Preferito</span>
</button>
<div class="fix" ng-if="showAdd()">
<div class="add">
Aggiungi un Preferito
</div>
</div>
If the desire is to always show one or the other, then it is best practice to structure the view as follows:
<div class="fix" ng-if="showingAdd">
<button type="button" class="btn btn-link">
<span class="glyphicon glyphicon-plus"></span>
<span class="fix">Aggiungi un Preferito</span>
</button>
<div class="add">
Aggiungi un Preferito
</div>
</div>
<div class="edit" ng-if="!showingAdd">
Modifica
</div>
In the controlller I have this code when the template loads:
$scope.pristine_timesheet = angular.copy($scope.timesheet);
In the template I want to do this:
<div ng-show="(timesheet != pristine_timesheet)">
<div class="button-bar">
<a class="button button-positive" ng-click="update(form)">Save changes</a>
<a class="button button-stable" ng-click="discard(form)">Discard changes</a>
</div>
</div>
For some reason this is always showing the buttons. I know I could use $dirty but wondering why this isn't working.
I solved it by extending the class in the service like this:
angular.extend(Timesheet.prototype, {
compare: function(timesheet){
return ((timesheet.id == this.id) && (timesheet.notes == this.notes) && (timesheet.task_link_id == this.task_link_id) && (timesheet.time_start == this.time_start) && (timesheet.time_end == this.time_end));
}
In the template I can now simply do:
<div ng-show="!(timesheet.compare(pristine_timesheet))">
Thanks PSL for the explanation. I also tried with lodash isEqual but that one didn't work for me: https://lodash.com/docs#isEqual
<div class="company_name" ng-controller="CompanyName">
<h1 class="left">
{{data.company_name}}
</h1>
</div>
What I'd like to do is make it so that if data.company_name hasn't been added through an input field, it shows a placeholder "Company name", how can that be done using angularjs?
You can use ng-if and do something like
<div class="company_name" ng-controller="CompanyName">
<h1 class="left">
<span ng-if="data.company_name === ''">
// Some placeholder
</span>
<span ng-if="data.company_name !== ''">
{{data.company_name}}
</span>
</h1>
</div>
BTW ngIf is a new directive added in v1.1.5 so you might need to upgrade your angular version
See my plunker here : http://plnkr.co/edit/qiN2XshEpay6e6zzhUKP
One way to keep the code clean is to use a filter. This piece of code adds a class to an active tab.
var filters = angular.module('filters');
filters.filter('ie', function(){
return function(v, yes, no){
return v ? yes : no;
};
});
Template
<li class="{{activeTab == 'home' | ie: 'active-class':''}}">
Home
</li>
For Using ng-if, ng-else-if, and ng-else in your project use this:
https://github.com/zachsnow/ng-elif
You can use ng-if condition for the check company name vlaue. Let's take example of
<span ng-if="driver.status_flag == 1">
<i ngif="{{driver.status_flag}}" class="icon-ok-sign icon-2x link" style="color:#090" href="#" title="Payment received" ></i>
</span>
In above example I have added condition status_flag value is 1 then the inside span value will show. Same way with your case you can add statement like
<span ng-if="data.company_name === ''">
<i ngif="{{driver.status_flag}}" class="icon-ok-sign icon-2x link" style="color:#090" href="#" title="Payment received" ></i>
</span>