I am very new to AngularJs, Somehow I am now able to create a directive which can be used for binding data from controller to html.Now I want to create a functionality like a search over the list which is shown on AngularJs. This list contains different objects. I have created the Plunker here
HTML
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="movieDesc">
<diuv>
<input type="text" placeholder="search"/>
<input type="button" value="Search" />
</div>
<div ng-repeat="m in movies" movies="m" save="saveData(movie)"></div>
</body>
</html>
Controller
angular.module('app', []);
angular.module('app').controller('movieDesc', function($scope) {
$scope.movies = [{
name: 'abc',
desc: 'this is desc text for the movie',
pic: 'http://png.clipart.me/graphics/thumbs/134/abstract-geometric-background-triangle-and-square-black_134053397.jpg'
}, {
name: 'def',
desc: 'this is desc text for the movie def',
pic: 'http://png.clipart.me/graphics/thumbs/201/abstract-modern-banner-background-of-geometric-shapes-abstract-geometric-form_201768245.jpg'
}, {
name: 'ghi',
desc: 'this is desc text for the movie ghi',
pic: 'http://www.cianellistudios.com/images/abstract-art/abstract-art-infinite-150.jpg'
}]
$scope.saveData = function(data) {
console.log(data);
}
});
My Directive
angular.module('app').directive('movies', function() {
return {
templateUrl: "movieCard.html",
restrict: "EA",
scope: {
movies: '=',
save: '&'
},
link: function(scope, element, attrs) {
console.log("link function called");
element.addClass('moviesBox');
var clickedFn = function() {
alert("clicked");
};
console.log("console", element[0].querySelector('.btnSelect'));
var $this = element[0].querySelector('.btnSelect');
$($this).click(function() {
alert(scope.movies.desc)
})
}
}
})
movieCard.html
<div>
<div>
<b>Name:</b> {{movies.name}}
</div>
<div>
<b>Description:</b> {{movies.desc}}
</div>
<div>
<img ng-src="{{movies.pic}}" />
</div>
<div>
<input type="text" ng-model="movies.someText">
</div>
<div>
<input class="btnSelect" type="button" value="Desc" ng-click="clickedFn()">
</div>
<div>
<input class="btnSelect" type="button" value="Save Data" ng-click="save({movie: movies})">
</div>
</div>
There is a search button in HTML, so on that I want to perform that search option, where I can type and get that list only which I search
You can achive this with 2 options. 1. Use smth like this.
<input type="button" value="Search" data-ng-click=filter(key) data-ng-model="key" />
$scope.filter = function(key){
$scope.filteredMovies = $scope.movies.filter(function filterByName(movie){
return movie.name.indexOf(key) !==-1;
});
};
When you click, this code will filter you list and only filtered itmes will be presente on filteredMovies .
Usage In HTML Template Binding {{ filter_expression | filter : expression : comparator}} In JavaScript $filter('filter')(array, expression, comparator)
angular.module('app').filter('superFilter', function(){
return function(list, key){
if (!key) {
return list;
}
return list.filter(function filterByName(movie) {
return movie.name.indexOf(key) !== -1;
});
}
});
But be care with filter :)