How to in AngularJS display only div when in json filename contain for example jpg string?
I have got a list with file in json with .jpg pdf and other stuffs. I display theme by using ng-repeat and filter{filename:'jpg'}. It's works fine. But how to hide the div when jpg does not exist ?
<div>
<div>JPG FILES</div>
<ul ng-repeat="">
<li>name<a href='#'>download</a></li>
</ul>
</div>
I'm still not sure what you want, but this will hide the outer div if filtered results is empty.
<div ng-hide="filteredResults.length === 0">
<div>JPG FILES</div>
<ul ng-repeat="attachment in filteredResults = (example.attachments | filter: {file_name:'jpg'})">
<li>{{attachment.file_name}}<a href='#'>download</a></li>
</ul>
</div>
Hope this helps.
something like this ?
ng-show="filename == 'jpg'"
filename have to be in your scope
in yout controller
$scope.filename = "jpg";
HTML:
<div>
<div ng-if="hasImage">JPG FILES</div>
<ul ng-repeat="">
<li>name<a href='#'>download</a></li>
</ul>
</div>
JS:
$scope.hasImage = function()
{
if(yourjsonfile.indexOf("jpg") > -1)
{
return true;
}else
{
return false;
}
}
Related
HTML:
<ul>
<li ng-repeat="image in files | filter :'image'">
<div class="file-tag-baloon1" ng-mouseover="hoverImg(image.id)" ng-mouseleave="hoverOut()">
<span style="width: 200px;">
<a ng-show="hideHoveredImage==false;" class="hover-title">{{hoverTitle}}
<img class="hover-image" src="{{hoveredImage}}">
</a>
</span>
</div>
</li>
</ul>
JS:
$scope.hoverOut = function () {
$scope.hideHoveredImage = true;
$scope.hoveredImage = "";
}
$scope.hoverImg = function (id) {
$scope.hoveredImage = FileService.getFile(json, id);
}
I wrote a function to hove the image on mouseover. But the problem is If I have 4{{hoverTitle}}, four times the hovering image div appears ,i need the hovering image per index also I wanted it to be exactly at top of the $scope.hiverTitle . Any examples or solution will help me better.
HTML:
<div class="row"
ng-if="dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" >
<div class="file-upload-wrapper">
<div class="file-upload">
<img class="file-image" ng-src="{{imageSource}}" ng-if="imageSource"/>
<input type="file" file-model="image" name="file" class="file"/>
</div>
<div class="file-upload-text"> Upload Picture</div>
</div>
<div class="file-restriction-info">
Maximum 5 Images can be attached.<br/>
File size below 10MB. File Format jpeg & png
</div>
<div class="file-tags">
<ul>
<li ng-repeat="image in files | filter :'image'" >
<div class="file-tag-baloon">
<span>
<a ng-click="getImage(image.id);">{{image.filename}}</a>
</span>
<span><a ng-click="removeImage(image.id)">x</a></span>
</div>
</li>
</ul>
</div>
</div>
JS:
$scope.dataLoading = false;
$scope.uploadVideo = function( file ){
var json = {
"request": {
"service":{
"servicetype":servicetype,
"functiontype": "1012",
"session_id": session_id
},
"data":{
"rolename":rolename
}
}
};
console.log(JSON.stringify(json));
FileService.uploadFile( json, file ).then(function(res){
$scope.dataLoading = true;
console.log(JSON.stringify(res));
if( res && res.status.code == 0 ) {
$scope.getVideo( res.data.mediaids[0] );
$scope.getAll();
} else FlashService.Error(res.status.message, true);
});
Need to load dataloading image till response comes from the backend .I am using loading for video upload request. Since video uploading time is more. It will be good , if I use dataloading. Now I am unable to trigger the dataloading part. Need assistance
<div class="row" ng-class="{visible: dataLoading, hidden: !dataLoading}" src="TOO LONG FOR ME TO COPY PASTE IT GOD DAMMIT">
in your controller, don't change anything (except, set your dataLoading to false once you've done loading)
in your CSS file :
.visible {
display: block;
}
.hidden {
display: none;
}
For this things I recommend using 'angular-busy'.
https://github.com/cgross/angular-busy
With this angular module you can add the promise to a scope object. This scope object you bind to the cg-busy directive which then shows a loading gif until the promise is resolved.
controller.js
$scope.uploadPromise = FileService.uploadFile(json, file).then(.....
view.html
<div cg-busy="uploadPromise">Successfully uploaded!!</div>
<!-- It shows a loading icon until the promise 'uploadPromise' is resolved. Then this <div> will be shown -->
It is also possible to add your own gif or svg.
In Angular I wanted to bind $index to controller. How can I send $index value in to my controller. Here is my html code.
<body>
<div class="container">
<div class="row row-content" ng-controller="demoController as demoCtrl">
<ul>
<li ng-repeat="val in demoCtrl.list" >Hello {{$index}}</li>
</ul>
</div>
</div>
Here is my controller code
var app = angular.module('confusionApp',[])
app.controller('demoController', function(){
var list = [1,2,3,4,5];
this.list = list;
var array = ['abc','def','ghi','jkl','mno']
this.array = array
console.log(this.array[index]);
});
I need to use ng-modal in HTML and bind that value to some variable in my controller.
Based on the selection of index, it should check in array and respective array should have to print.
Can any of you please help
To get your current iteration position in your controller you have define a function.
So your html code like this.
<body>
<div class="container">
<div class="row row-content" ng-controller="demoController as demoCtrl">
<ul>
<li ng-repeat="val in demoCtrl.list" ng-click="dispArray($index)">Hello {{$index}}</li>
</ul>
</div>
</div>
And your controller code
var app = angular.module('confusionApp',[])
app.controller('demoController', function($scope){
$scope.dispArray = function(index){
// console.log(index);
// your code
}
});
Depending on what you're trying to accomplish you might be better served creating a custom iterator.
function makeIterator(array){
var nextIndex = 0;
return {
next: function(){
return nextIndex < array.length ?
{value: array[nextIndex++], done: false} :
{done: true};
}
}
}
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators
Angular is going to iterate over everything in the list when you use ngRepeat. If you're trying to track which list item a user clicks then you'll just add that in there using $index.
<li ng-repeat="val in demoCtrl.list" >
<span ng-click="demoCtrl.userClicked($index)"> Hello {{$index}}</span>
</li>
If you're just trying to print the data in each item, ng-repeat is already iterating everything for you.
<li ng-repeat="val in demoCtrl.list" >
<span ng-click="demoCtrl.userClicked($index)"> Hello {{val}}</span>
</li>
It all depends on what you're trying to do.
i dont konw what u want to do. if u want to use event. you can pass $index to your controller function like:
<li ng-repeat="val in demoCtrl.list" ng-click="getIndex($index)">Hello {{$index}}
$scope.getIndex = function($index) {
console.log($index)
}
hope to help u.
How can I show in AngularJS and url or a plain text if a variable contains text?
For example let's have the model
$scope.model = {
Url: ''
};
<div data-ng-controller="myController">
if (model.Url)
{
URL
}
else
{
<p>{{model.Url}}</p>
}
<div>
P.S. The if else condition is for demo purpose, so how can I acheieve that using a directive like data-ng-if ?
You can try something like this:
<div data-ng-controller="myController">
<a ng-if="model.Url" ng-href="{{model.Url}}">URL</a>
<p ng-if="!model.Url">{{model.Url}}</p>
<div>
Note: you should use ng-href instead of href otherwise browser doesn't update attribute.
Update
This thing works only if url present or empty as in provided example. It doesn't check is value url or text. See answer below that checks.
Create a function to test if a block of text is a URL or not
$scope.isURL = function(text){
var expression = /[-a-zA-Z0-9#:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9#:%_\+.~#?&//=]*)?/gi;
// alternative
// var expression = new RegExp("^(http[s]?:\\/\\/(www\\.)?|ftp:\\/\\/(www\\.)?|www\\.){1}([0-9A-Za-z-\\.#:%_\+~#=]+)+((\\.[a-zA-Z]{2,3})+)(/(.)*)?(\\?(.)*)?");
var regex = new RegExp(expression);
/// for example text could be: text = 'www.google.com';
if (text.match(regex) ){
return true;
} else {
return false;
}
}
HTML:
<div data-ng-controller="myController">
<div ng-init="model.url = 'some text'"></div>
<div ng-if="isURL(model.url)">
<a ng-href='model.url' > is url </a>
</div>
<div ng-if="!isURL(model.url)">
<p ng-bind='model.url' > </p>
</div>
<!-- better done as ng-switch -->
<div ng-switch on="isURL(model.url)">
<p ng-switch-when='false' ng-bind='model.url'></p>
<a ng-switch-when='true' ng-href='model.url' ng-bind='model.url'></a>
</div>
<div>
I am trying to show exact content when I click on data from ng-repeat.
<div ng-repeat="trailSpot in trail.wayPoints">
<a ng-click="viewState.showSpotDetails = !viewState.showSpotDetails">
<p>Spot {{$index + 1}}. {{trailSpot.wpName}}</p>
</a>
<p >{{trailSpot.wpDescription}}</p>
</div>
When I click the first wpName, I want to show wpDescription only about the first wpName on another div. What should I put in that div.
<div class="panel-body" ng-show="viewState.showSpotDetails">
<div>
???
</div>
</div>
Anybody has any tips on what I am trying to do?Thank you!
Just pass the object to assign the property like this:
http://jsfiddle.net/wLs8axLj/
JS
var app = angular.module('itemsApp',[]);
app.controller('ItemsCtrl',function($scope) {
$scope.items = [
{name:'Test 1',details:'Test 1 Details'},
{name:'Test 2',details:'Test 2 Details'}
];
$scope.showDetails = function(i) {
$scope.item_details = i.details;
};
});
HTML
<div ng-app="itemsApp" ng-controller="ItemsCtrl">
<ul>
<li ng-repeat="i in items" ng-click="showDetails(i)">{{i.name}}</li>
</ul>
<hr>
{{item_details}}
</div>