I'm using Angular 1.5.8 and slick slider 1.6.0. In my project, I have one parent ng-repeat and a child ng-repeat. My slick slider contains one ng-repeat which receives images from API data. My current parent ng-repeat object is referred as 'key' while my current child ng-repeat object is referred as 'thumbkey' (in key.allimages). I need to take current thumbkey object outside slick slider for some manipulations.
(If I could get 'thumbkey' object on 'init' or 'afterchange' event of slider, it would be better as I want to change some values inside the object).
I am using Angular directive for slick "angular-slick-carousel".
<div class="sub-container" ng-repeat="key in getStreamResponse track by $index" pik-id="{{key.pik_id}}">
<!--This code in inside slick slider (Start)-->
<div ng-repeat="thumbkey in key.allimages track by thumbkey.pik_name">
<div class="story-header">
<div class="story-header-pic">
<img class="story-profile-pic" ui-sref="user-profile.story({userid:encodeUserId(key.piklist_user_id)})" src="Resources/spyguy.png" actual-image="{{path}}/profile/{{key.piklist_profile_pic}}" width="40" height="40">
</div>
<div class="story-header-content">
<div class="story-name default-pikmobile-font" ng-show="key.piklist_name != ''" ng-bind="key.piklist_name"></div>
<div class="null-originator-story-name default-pikmobile-font" ng-show="key.piklist_name == ''" ng-bind="thumbkey.user_name"></div>
<div class="story-header-user" ng-if="key.piklist_name != ''">
<span class="normal-text">by</span>
<span class="user-name" disable-sref-if="thumbkey.user_id == selfInfo.id" ui-sref="user-profile.story({userid:encodeUserId(thumbkey.user_id)})" ng-bind="thumbkey.user_name"></span>
<span class="original-user-name" disable-sref-if="thumbkey.originator_id == selfInfo.id" ng-if="(thumbkey.user_name != thumbkey.originator_username) && thumbkey.originator_username != '' "><span class="original-photo-text" ui-sref="story-page({pikid:encodeStoryId(thumbkey.pikd_pik_id)})">Original photo</span> <span class="normal-text">by </span><span class="originator" ui-sref="user-profile.story({userid:encodeUserId(thumbkey.originator_id)})" ng-bind="thumbkey.originator_username"></span></span>
</div>
</div>
<div class="story-upload-time" ng-if="thumbkey.origin_date != '0000-00-00 00:00:00'" ng-bind="getUploadTime(thumbkey.origin_date)"></div>
<div class="story-upload-time" ng-if="thumbkey.origin_date == '0000-00-00 00:00:00'" ng-bind="getUploadTime(thumbkey.date_time)"></div>
</div>
</div>
<!--This code in inside slick slider (End)-->
</div>
Related
I have ng-repeat loop which loops collection of image items in bootstrap carousel, and each image item has id, title and imagename property. Outside ng-repeat loop I have remove button with ng-click function that accepts imageid to delete it. But, as this button is outside loop, it doesn't have access to current image in loop.
<div ng-repeat="img in images" ng-class="{'active':$first}">
<img ng-src="folder/{{img.imagename}}">
<div class="carousel-caption">
<p>{{img.id}}</p>
<p>{{image.title}}</p>
</div>
</div>
<div ng-click="remove(img.id)">
<i class="fa fa-times fa-1x"></i>
</div>
If I put remove button inside loop it works, but is it possible to keep track of current image from loop and have only one remove button outside loop, to which I can pass id of current image (image displayed on carousel).
You should use some bindings like this one: https://angular-ui.github.io/bootstrap/#/carousel - it has the active image accessible.
This is not tested, you need to adapt it to your code.
<div uib-carousel active="active">
<div uib-slide ng-repeat="img in images track by img.imagename" index="img.imagename">
<img ng-src="folder/{{img.imagename}}">
<div class="carousel-caption">
<p>{{img.id}}</p>
<p>{{image.title}}</p>
</div>
</div>
</div>
<div ng-click="remove(active)">
<i class="fa fa-times fa-1x"></i>
</div>
I have an ng-repeat div. In that, I want to call a function using ng-init directive; in that function, I want to append data to the div dynamically, by a created dynamic id. However, I didn't get dynamically created ids in get_All_ImagesData function.
I Want to be able to call this function inside the ng-Repeat loop.
Code is below
<div class="active-task-body" data-ng-repeat="items in UserAssignTaskAllData">
<div class="col-md-12" id="data-{{items.TaskDetailId}}">
<div class="task-data-images" ng- init="get_All_ImagesData(items.TaskDetailAttachment,items.TaskDetailId)">
</div></div></div>
Function in controller:
$scope.get_All_ImagesData = function (AttachedDataArray,id) {
if (AttachedDataArray != "")
{
var dataAppend = "<a href=''> <img src="+current_page_url +"Content/images/filetype/image.jpg"
+' height="30" width="30" /></a>';
angular.element(document.getElementById('data-' + id)).append(dataAppend);
}
}
The "Angular way" is to let the model drive the DOM. You should not manipulate the DOM manually from controllers like you do in your function. Write all the HTML in your template and then change the model to change the view.
<div class="active-task-body" data-ng-repeat="items in UserAssignTaskAllData">
<div class="col-md-12">
<a href='' ng-if="items.TaskDetailAttachment">
<img
ng-src="{{current_page_url}}Content/images/filetype/image.jpg"
height="30"
width="30" />
</a>
</div>
</div>
Note that current_page_url should be a property of $scope for this to work.
"allitems" contains all items for a category that is selected in a combobox. That part of the code working properly.
I have images saved in a database as binary data for each item. When an item is displayed then the image of the item shall be rendered. For doing this I have to save item's ID in ASP .Net controller before rendering, because the "RenderImage" needs the Item's ID. This is done by calling "saveItemId" in AngularJS controller.
But the rendering of the images are very unpredictable. "saveItemId" is called repeatedly but not RenderImage.
There is no problem calling methods/saving ID in AngularJS controller or in ASP .Net MVC controller.
<div dir-paginate="r in allitems | filter:q | itemsPerPage: pageSize" current-page="currentPage" ng-init ='saveItemId(r.ID)' class="ag-fresh">
<div style="float:left">
<div class="col-xs-3">
<div style="width:200px;">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="#Url.Action("RenderImage")" height="84" width="84"/>
<br/>
<h>{{r.Price}}</h>
<p>{{r.Name}}</p>
<button class="btn btn-default add-to-cart" ng-click="AddToCart(r.ID)">Add to cart</button>
{{successTextAlert}}
</div>
</div>
</div>
</div>
</div>
</div>
its seems that RenderImage is a js variable in the controller scope. if its so, its need to be call with brackets, like {{RenderImage}}
Try using 'ng-src' instead 'src' attribute, for the img element as described at
https://docs.angularjs.org/api/ng/directive/ngSrc#!
This works properly:
<img ng-src="data:image/jpeg;base64,{{arrayBufferToBase64(r.InternalImage)}}" height="84" width="84"/>
I Added arrayBufferToBase64 to the angular controller.
here is the plunker:
http://plnkr.co/edit/Qj2yxQuT7SZ19u3vuXyq?p=preview
like an inbox.
<div class="col-xs-4 leftnav">
<button class="btn btn-primary btn-block">Add News</button>
<br>
<article ng-repeat="x in issues | filter:query" ng-click="makeActive(i)">
<h4>{{x.title}}</h4>
<p>{{x.message | limitTo:numLimit}}</p>
Read More..
</article>
</div>
<div class="col-xs-8 main-content">
<h2>News</h2>
<hr>
<article ng-repeat="x in issues">
<h3 >{{x.title}}</h3>
<p>{{x.priority}}</p>
<p class="lead">{{x.author}} - 6/12/2014</p>
<!-- ng-if="x.author == 'Andy' " -->
<hr>
<p>{{x.message}}</p>
Read More
<hr>
</article>
</div>
having a list of items ng-repeat on the left, then selecting the main content (on the right) from the options, then displaying the full content as the main selection.
ng-if ? ng-show ?
not sure how well I've described this but it should be pretty obvious from the fiddle.
thanks in advance.
I modified your plnkr http://plnkr.co/edit/9qZsp2o22L5x1a0JofPy?p=preview
I create a currectIssue variable for your right content display.
In left content, Read More.. has been change to <a ng-click="showIssue(x)">Read More..</a>
updated plunk: http://plnkr.co/edit/hGsdkybRMoRct8VykCcB?p=preview
well, you might consider:
- use another scope variable to display the selected item from the object
- I'd use ng-if in this case as that will create/destroy the content as needed
// controller
$scope.selectIssue = function(x) {
$scope.issue = x;
}
$scope.selectIssue($scope.issues['1']);
//view
<article>
<h3 >{{issue.title}}</h3>
<p>{{issue.priority}}</p>
<p class="lead">{{issue.author}} - 6/12/2014</p>
<div ng-if="issue.author == 'Andy'">
<hr>
<p>{{issue.message}}</p>
Read More
<hr>
</div>
</article>
I have a unit test for an angular directive. This directive has a ng-repeat inside its template which is bound to an array inside the directive's controller. The array changes when a method in the controller is called (this method actually gets called by a sub-directive, something like addMe()).
This works fine in 'real-life', but does not inside a Jasmine unit test. I can see in the debugger, that everything is called and the array has the correct contents, but somehow the ng-repeat won't update. I even tried to call $scope.$digest() inside the controller after a change to the array, but that doesn't work either.
Any help?
Daniel
Relevant part of the template is:
<div class="step-wizard-header">
<div class="step"
ng-repeat="title in titles"
ng-click="selectPage($index, 0)"
ng-class="{ active: currentIndex == $index, done: currentIndex > $index }">
<span class="number">
{{$index + 1}}
</span>
<span class="title">
{{title.text}}
</span>
<div class="substep-holder"
ng-show="currentIndex == $index">
<div class="substep"
ng-repeat="sub in title.subs"
ng-click="selectPage($parent.$index, $index); $event.stopPropagation()"
ng-class="{ active: currentSubIndex == $index, done: currentSubIndex > $index }">
{{sub.text}}
</div>
</div>
<div class="right-arrow"
ng-style="{ 'z-index': (titles.length - $index) }">
</div>
</div>
</div>
The problem was caused by some incompatibility due to the version of ng-animate. Updating everything (to 1.2.13 at the moment) solved the issue.