I see during load that the scope element $scope.docDetails has the necessary data.
In the view when I use the ng-repeat to print info, I see that it is not displayed in browser.
<body ng-controller="documentUploadController" nv-file-drop="" uploader="uploader" filters="queueLimit, customFilter">
<div class="container">
<div ng-repeat="row in documentUploadController.docDetails">
<div class="col-sm-2">{{row.DocumentTypeName}}</div>
<div class="col-sm-3 elementwrap">{{row.FileName}} </div>
..
</div>
</div>
WHen i view the HTML ,i see the ng-repeat code being commented out
Where am I going wrong?
Currently, your ng-repeat variable is $scope.docDetails
Since $scope already equals the controller, remove the controller reference in ng-repeat like <div ng-repeat="row in docDetails">
<body ng-controller="documentUploadController" nv-file-drop="" uploader="uploader" filters="queueLimit, customFilter">
<div class="container">
<div ng-repeat="row in docDetails">
<div class="col-sm-2">{{row.DocumentTypeName}}</div>
<div class="col-sm-3 elementwrap">{{row.FileName}} </div>
..
</div>
</div>
Related
i have this code for displaying images using slick.js.
<div>
<slick infinite="true" slides-to-show="4" slides-to-scroll="1">
<div ng-repeat="var in myArray" class="slick-item">
<div class="truckImage truck-error"></div>
</div>
</slick>
</div>
and below is the output.
if i use three different divs than it works fine but not with ng-repeat.
instead it should come in a single row as originally slick js works.
Try by adding a data attribute to your declaration
Example,
<slick infinite="true" data="myArray" slides-to-show="4" slides-to-scroll="1">
<div ng-repeat="var in myArray" class="slick-item">
<div class="truckImage truck-error"></div>
</div>
</slick>
<div>
<slick infinite="true" slides-to-show="4" slides-to-scroll="1">
<div class="row">
<div ng-repeat="var in myArray" class="slick-item">
<div class="col-md-4 truckImage truck-error"></div>
</div>
</div>
</slick>
</div>
I think it will work for you, let me know if it is not working. i have just added <div class="row"> and then <div class="col-md-4 truckImage truck-error"></div>
How to auto refresh DIV or span in angularjS ? what is write in angularjs for refresh
<div class="direct-chat-text">
<div ng-repeat="comment in comments">
<div class="updates">
<div ng-controller="MyCtrl">
<span>{{comment.message}}</span>
</div>
Controller should be defined earlier, values changing in model will change in the view as well.
<div ng-controller="MyCtrl">
<div class="direct-chat-text">
<div ng-repeat="comment in comments">
<div class="updates">
<span>{{comment.message}}</span>
</div>
</div>
</div>
</div>
In your controller you have to update scope data of "comments" and then your view will be updated with new data. to update data you can use $timeout with collback
I have an array of products. I would like to display them in rows, with 4 products per row. Right now my code is
<div ng-repeat="product in products" class="col-md-3">
<p> {{product.name}} </p>
<p> {{product.price}} </p>
</div>
However, this is not displaying properly. I have tried to incorporate rows with an ng-if, but this is as close as I've come:
<div ng-repeat="product in products">
<div ng-if="$index %4 == 0" class="row">
<div class="col-md-3">
(content)
</div>
</div>
<div ng-if="$index %4 != 0" class="col-md-3">
(content)
</div>
</div>
I think I know why the above doesn't work: if index %4 != 0then the column that is created is not actually put inside of the row made before.
Is there an angular way to do this? Do I need a custom directive? Note: I have managed a solution not using angular directives but it doesn't seem clean, so I would like to do it "angularly" if possible.
You should be able to use your first method just fine, here's the html I wired up in a js fiddle:
<div ng-app="app">
<div ng-controller="ParentCtrl">
<div class="container">
<div class="row">
<div data-ng-repeat="option in options" class="col-md-3">
{{ option }}
</div>
</div>
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/ubexop9p/
You will have to play around with the frame sizes if your monitor is too small, but I was able to get it do what you wanted.
Do you have that wrapped in a container or container-fluid? I believe that's required for the grid system to work.
<div class="container">
<div class="col-md-3">Col 1</div>
<div class="col-md-3">Col 2</div>
<div class="col-md-3">Col 3</div>
<div class="col-md-3">Col 4</div>
<div class="col-md-3">Col 5</div>
</div>
Turns out it was a problem with the content I was putting inside the columns, the code I posted does in fact work.
I am using bootstrap's offsets in my layout, and have a simple conditional that places the offset on every 5th element.
class="col-md-2 col-sm-2 col-xs-5 ng-class:{'col-md-offset-2 col-sm-offset-2' : !($index % 5)}"
I also made a directive that shows a little red box on hover, allowing a user to delete their element. Works fine, except that the layout won't refresh and the offsets get set on the wrong elements, making a big mess of the layout.
I tried doing scope.$apply(), but this didn't help. How can I accomplish this?
my html:
<body ng-controller="MyController">
<div class="container">
<div class="row">
<div ng-repeat="image in images"
dg-deletable=""
class="col-md-2 col-sm-2 col-xs-5 ng-class:{'col-md-offset-2 col-sm-offset-2' : !($index % 5)}">
<div class="imagebox">
<div>{{image.name}}</div>
<div class="imagecover"></div>
<img width="140" src="{{image.file}}" />
</div>
</div>
</div>
</div>
</body>
inside my directive:
delete_btn.on('click', function(event) {
scope.$apply(function() {
element.remove();
});
});
http://plnkr.co/edit/2ADoSYwPuh46Zh5ylmjw?p=preview
(you'll need to view in fullpage mode)
Your are right #dgig. !($index % 5) works fine. The problem is that you should delete the image from the array too.
I have changed the plunker
I think the code could be written better using angular. You can use angular directives to fire events and set the style-sheet.
delete_btn.on('click', function(event) {
scope.$apply(function() {
angular.forEach(scope.images, function(img){
if(img.name == attr.imagename){
scope.images.splice(scope.images.indexOf(img),1);
}
});
element.remove();
});
});
I set the imagename as an attribute to be used in delete function.
<body ng-controller="MyController">
<div class="container">
<div class="row">
<div ng-repeat="image in images" dg-deletable="" imagename={{image.name}} class="col-md-2 col-sm-2 col-xs-5 ng-class:{'col-md-offset-2 col-sm-offset-2' : !($index % 5)}">
<div class="imagebox">
<div>{{image.name}}</div>
<div class="imagecover"></div>
<img width="140" src="{{image.file}}" />
</div>
</div>
</div>
</div>
</body>
ng-class needs to be its own HTML attribute, like so
<body ng-controller="MyController">
<div class="container">
<div class="row">
<div ng-repeat="image in images"
dg-deletable=""
class="col-md-2 col-sm-2 col-xs-5" ng-class="{'col-md-offset-2 col-sm-offset-2' : !($index % 5)}">
<div class="imagebox">
<div>{{image.name}}</div>
<div class="imagecover"></div>
<img width="140" src="{{image.file}}" />
</div>
</div>
</div>
</div>
</body>
It is a very simple problem about data binding procily of angularjs, refer my another answer and explanation
You just need to use obj.images to bind images data, but not using images directly.
I have this simple code. The problem is that "ng-switch-when" is not displaying, which means that column.stage is not being rendered correctly, although I tried displaying {{column.stage}} and it displays the correct value (1 OR 2 OR 3...)
<div class="column span3" ng-repeat="column in columns">
<h1>{{column.title}}</h1>
<div class="row" ng-repeat="shot in shots" ng-switch on="shot.stage">
<h6 ng-switch-when="{{column.stage}}">{{shot.title}}</h6>
</div>
</div>
You need to put ng-switch on="shot.stage" in its own element like:
<div class="column span3" ng-repeat="column in columns">
<h1>{{column.title}}</h1>
<div class="row" ng-repeat="shot in shots">
<div ng-switch on="shot.stage">
<h6 ng-switch-when="{{column.stage}}">{{shot.title}}</h6>
</div>
</div>
</div>