I'm using https://github.com/devmark/angular-slick-carousel
And i want to add a search filter, so it will show only the slides who has "searchStr" in their "data-test-id" attribute.
HTML:
<slick settings="slickConfig" >
<div ng-repeat="i in number"
data-test-id="{{i.title}}"
class="slick-item">
{{i.title}}
</div>
</slick>
JS:
$scope.slickConfig.method.slickFilter(searchStr);
How should i use the slickFilter function?
In that case, you need to update or relaunch slick-carousel. So, it'd be pretty simple and almost like any other filter:
Your view:
<!-- You have Your Filter -->
<input type="text" ng-model="filter" ng-change="updateNumber4()"/>
<!-- You have your SlickCarousel, it's important to include ng-if -->
<slick class="slider" settings="slickConfig4" ng-if="slickConfig4Loaded">
<!-- IMPORTANT: I'm filtering in ng-repeat by the ng-model in the input -->
<div ng-repeat="i in number4 | filter:filter" >
<div style="width:{{ i.label }}px;height:100px; background:{{i.background}}">{{i.label}}</div>
</div>
</slick>
But, as you see the input has an ng-change and I have ng-if on the slick. It's the different part.
In your controller you need:
$scope.updateNumber4 = function () {
$scope.slickConfig4Loaded = false;
$timeout(function() {
$scope.slickConfig4Loaded = true;
});
};
Also, take into consideration you have to import timeout in your controller.
You can play with this example which I just made: https://plnkr.co/edit/1v3DYmfLyqvjedKz
Related
I am new to AngularJS.
I have created <li> to which I used ng-repeat.
<li> contains images and buttons like like, comment and share which is inside <li> and created by ng-repeat.
I have made function which will replace empty like button to filled like button (By changing background image of button).
But problem is this trigger applies to only first like button and other buttons does not change.
How can I fix this?
Code:
HTML:
<html>
<body>
<ul>
<li ng-repeat="media in images"><div class="imgsub">
<label class="usrlabel">Username</label>
<div class="imagedb">
<input type="hidden" value="{{media.id}}">
<img ng-src="{{ media.imgurl }}" alt="Your photos"/>
</div>
<!-- <br><hr width="50%"> -->
<div class="desc">
<p>{{media.alt}}</p>
<input type="button" class="likebutton" id="likeb" ng-click="like(media.id)" ng-dblclick="dislike(media .id)"/>
<input type="button" class="commentbutton"/>
<input type="button" class="sharebutton"/>
</div>
</div> <br>
</li><br><br><br>
</ul>
</body>
</html>
JS:
$scope.like = function(imgid)
{
document.
getElementById("likeb").
style.backgroundImage = "url(src/assets/like-filled.png)";
alert(imgid);
}
$scope.dislike = function(imgid)
{
document.
getElementById("likeb").
style.backgroundImage = "url(src/assets/like-empty.png)";
}
Thanks for help & suggestions :)
The id for each button should be unique but in your case, it's the same for all buttons ('likeb').
You can set the value of the attribute 'id' for each button dynamically by using '$index' and passing '$index' to the functions as follows:
<input type="button" class="likebutton" id="{{$index}}" ng-click="like($index)" ng-dblclick="dislike($index)"/>
Then in your controller, you can use the functions with the passed value.
For example,
$scope.like = function(index)
{
document.
getElementById(index).
style.backgroundImage = "url(src/assets/like-filled.png)";
}
Another good alternative in your case would be to use the directive ngClass.
use 2 css class for styling liked and disliked state, and then put the class conditionally with ng-class instead of DOM handling. and if you really want to perform a DOM operation (I will not recommend) then you can pass $event and style $event.currentTarget in order to perform some operation on that DOM object.
I want a live search: the results are queried from web api and updated as the user types.
The problem is that the list flickers and the "No results" text appears for a fraction of second, even if the list of results stays the same. I guess I need to remove and add items with special code to avoid this, calculating differences between arrays, etc.
Is there a simpler way to avoid this flicker at least, and probably to have possibility to animate the changes?
It looks like this now:
The html part is:
<div class="list-group">
<a ng-repeat="test in tests track by test.id | orderBy: '-id'" ng-href="#/test/{{test.id}}" class="list-group-item">
<h4 class="list-group-item-heading">{{test.name}}</h4>
{{test.description}}
</a>
</div>
<div ng-show="!tests.length" class="panel panel-danger">
<div class="panel-body">
No tests found.
</div>
<div class="panel-footer">Try a different search or clear the text to view new tests.</div>
</div>
And the controller:
testerControllers.controller('TestSearchListCtrl', ['$scope', 'TestSearch',
function($scope, TestSearch) {
$scope.tests = TestSearch.query();
$scope.$watch('search', function() {
$scope.tests = TestSearch.query({'q':$scope.search});
});
}]);
You should use ng-animate module to get the classes you need for smooth animation. For each ng-repeat item that's moved, added, or removed - angular will add specific classes. Then you can style those classes via CSS or JS so they don’t flicker.
An alternative way of doing what you require is to use the angular-ui bootstrap Typeahead component (check at the bottom of the post). It has a type-ahead-wait property in milliseconds and also a template url for customising it.
<div ng-app>
<div ng-controller="MyController">
<input type="search" ng-model="search" placeholder="Search...">
<button ng-click="fun()">search</button>
<ul>
<li ng-repeat="name in names">{{ name }}</li>
</ul>
<p>Tips: Try searching for <code>ann</code> or <code>lol</code>
</p>
</div>
</div>
function MyController($scope, $filter) {
$scope.names = [
'Lolita Dipietro',
'Annice Guernsey',
'Gerri Rall',
'Ginette Pinales',
'Lon Rondon',
'Jennine Marcos',
'Roxann Hooser',
'Brendon Loth',
'Ilda Bogdan',
'Jani Fan',
'Grace Soller',
'Everette Costantino',
'Andy Hume',
'Omar Davie',
'Jerrica Hillery',
'Charline Cogar',
'Melda Diorio',
'Rita Abbott',
'Setsuko Minger',
'Aretha Paige'];
$scope.fun = function () {
console.log($scope.search);
$scope.names = $filter('filter')($scope.names, $scope.search);
};
}
i don't no how do i explain my question,
ok let me try,
How to pass value from another div with same controller name?
<div ng-controller="myCtrl">
<select ng-model="filterBy" ng-options="filtration.title for filtration in filter_preferences"></select>
</div>
---------------------------------------------------
<div ng-controller="myCtrl">
<select ng-model="filterBy" ng-options="filtration.title for filtration in filter_preferences"></select>
<ul>
<li ng-repeat="vals in datas | filter: vals.completed = filterBy.value">{{vals.title}}</li>
</ul>
</div>
From the second div when i filter i works fine, but the same filter i've applied on the top with same controller but it doesn't work.
DEMO PLUNKER
The problem is that under each ng-controller it's creating a new $scope. This means they don't share $scope at all, and there are two different controller instances as well.
So, to communicate between two controllers, the common practice is to use a service.
I've updated your plunk with a very basic example.
The idea is that you create a service like:
app.value('sharedData', { filteredBy: true});
Then inject it into your controller and put it on your scope like so:
app.controller('MyCtrl', function($scope, sharedData) {
$scope.sharedData = sharedData;
});
Then after that you'd use it as your ng-model value and your filter:
<select ng-model="sharedData.filteredBy" ng-options="x.value as x.title for x in filter_preferences"></select>
<ul>
<li ng-repeat="vals in datas | filter: { completed: sharedData.filteredBy }">{{vals.title}}</li>
</ul>
From there it will work because both controllers (and $scopes) now have an instance of the same object... your sharedData service.
You need to specify
ng-controller="myCtrl"
where the ng-app is and remove all the other ng-controller statements. This is because whenever you are trying to do ng-controller in individual div it is creating a local scope for that particular div and then any change in the dropdown is refreshing that local scope.
Code:
<body ng-app="myApp" ng-controller="myCtrl">
<div >
<select ng-model="$parent.filterBy" ng-options="filtration.title for filtration in filter_preferences"></select>
</div>
---------------------------------------------------
<div>
<select ng-model="$parent.filterBy" ng-options="filtration.title for filtration in filter_preferences"></select>
<ul>
<li ng-repeat="vals in datas | filter: vals.completed = $parent.filterBy.value">{{vals.title}}</li>
</ul>
</div>
</body>
Controller Code change donw:
$rootScope.filterBy = $scope.filter_preferences[1];
Earlier it was:
$scope.filterBy = $scope.filter_preferences[1];
UPDATE:
You can have the filterBy variable on the rootScope rather than the local scope. So that any changes to the local scope will be done at the root level and changes will reflect everywhere
Tried this in your plunker and it is working.
You could not mention controller twice under ng-app
I'm fairly new to AngularJS and I can't seem to find a way to do this appropriately. I created a custom directive to Apply a function a pass in the row Index. However, I can't seem to think of the way to show items in a row. What would be the best way to do this? I want to show specific and hide a target row via controller.
HTML:
<div class="row" data-index="{{$index}}">
<div>other information</div>
<div class="item hidden" ng-class="{hidden: hidden[{{$index}}]}">
Item
</div>
</div>
My Directive:
scope.$apply(function () {
scope.$parent.showItem(index);
});
Controller:
$scope.teamDrop = function(index) {
$scope.hidden[index] = false;
};
You can use the ng-show and ng-hide directives to hide and show elements.
You can also use the ng-if directive to remove elements from the dom.
For your example I'd change your ng-class to an ng-hide
<div class="row" data-index="{{$index}}">
<div>other information</div>
<div class="item hidden" ng-hide="hidden[$index]">
Item
</div>
</div>
You also don't need to use the {{}} syntax in the ng-class becausue it's already expecting an angular expression, that's for data binding.
I have used the example from Angular JS Homepage and modified it to meet the requirements.
I have added the tabs info in a scope array and manipulate the data based in some conditions.
Issues:
I have attached an ng-bind on tabItem.title, so any change in the text box will update the title, but i want to limit the displaying of the title by 10 chars
When i create a new tab, i want that tab to be the selected one.
How can i select a tab based on some action taken (like on a click move from tab 1 to tab 2)
Fiddle: http://jsfiddle.net/austinnoronha/NWwcT
<br/><br/>
<div ng-cloak ng-app="TabsApp">
<div class="container" ng-controller="TabManagerCtrl">
<span class="label label-info label-ext" ng-click="tabManager.addTab()" style="cursor:pointer">Add a Tab</span><br/><br/>
<div>
<div tabs>
<div ng-repeat="tabInfo in tabManager.tabItems" pane title="{{ tabInfo.title }}">
<p>{{ tabInfo.content }}</p>
<input type="text" ng-model="tabInfo.title" ng-change="tabManager.getTitle(tabInfo)">
</div>
</div>
</div>
<br/><br/><br/>
</div><!-- /container -->
</div> <!-- /container -->
</div> <!-- /app -->
that's strange...
The limitTo filter doesn't seem to work, but you can create a new one and change your line
<div ng-repeat="tabInfo in tabManager.tabItems" pane title="{{ tabInfo.title }}">
by
<div ng-repeat="tabInfo in tabManager.tabItems" pane title="{{ tabInfo.title | limit:10}}">
with
angularApp.filter('limit', function() {
return function (input, value) {
return input.substr(0,value);
};
});
For the select one, I think it doesn't work because you have to have access to the pane scope. One way to do it is to access to access the property from the pane when you create it. In the pane directive, just add :
if(scope.$parent.tabInfo.selected) tabsCtrl.select(scope);
just after the tabsCtrl.addPane(scope); line. But then you also have to change the tabs directive so that the line
$scope.select = function(pane) {
become
this.select = $scope.select = function(pane) {
For your 3rd question, I don't know how to do it in that scheme.
I would make the pane directive different, putting the select function out of the directive, and binding it directly to your tabManager object.
Like this : http://jsfiddle.net/NWwcT/2/
In this cas, you have the 3 requirements, and you can select the tab from ouside by calling tabManager.select(index)