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.
Related
This is a simple question, but for some reason, I'm not getting the desired result.
Here's a snippet of the code inside my index.html file
<div class="container">
<div class="row">
<div class="col-xs-1">
<div ui-view="sidebar"></div>
</div>
</div>
<div class="row">
<div class="col-xs-11">
<div ui-view="content"></div>
</div>
</div>
</div>
What I'm hoping will happen is that the sidebar will take up 1 column and the rest of it will take up the remaining columns. However, when I view the page, the sidebar and the content are shown stacked on top of each other. Am I not allowed to put a ui-view inside a div container?
Try to write 2 columns in same row:
<div class="container">
<div class="row">
<div class="col-xs-1">
<div ui-view="sidebar"></div>
</div>
<div class="col-xs-11">
<div ui-view="content"></div>
</div>
</div>
</div>
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>
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>
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 trying to have a single-page Angular-App which has a view in the middle and tools like sidebar and topbar around that. But when the user is not logged in, the view should show a login partial and the side- and topbar should be hidden. As well as there should be a fullscreen background image. I got a working attempt, but it's rather ugly, so I wonder how I could do better:
<body ng-app ="MB">
<div ng-controller="mbMainCtrl as mainCtrl" class="container-fluid">
<!--fullscreen background when not logged in-->
<div ng-hide="$root.loggedIn" class="landing" ng-cloak>
</div>
<div>
<div ng-show="$root.loggedIn" class="row">
<mb-topbar></mb-topbar>
</div>
<div class="row">
<div ng-show="$root.loggedIn" class="col-sm-1">
</div>
<div ng-show="$root.loggedIn" class="col-xs-12 col-sm-2">
<mb-sidebar></mb-sidebar>
</div>
<!--view always visible, loads the login page as well-->
<div class = "col-sm-6">
<div ng-view></div>
</div>
<div ng-show="$root.loggedIn" class="col-xs-12 col-sm-2">
<div class="row">
<div mb-news-feed-dir></div>
</div>
<div class="row">
<div mb-quest-feed-dir></div>
</div>
</div>
<div ng-show="$root.loggedIn" class="col-sm-1">
</div>
</div>
</div>
</div>
...
</body>
I suggest you use ui-router and have a nested view to accomplish something like this in a more clean way without having to hide and show dom elements.