Essentially, I am dealing with a directive that represents a site and has multiple input fields for data collection. With potentially hundreds of these directives on the page, I have implemented a search function to quickly locate a specific site.
However, my issue arises when using the search feature - filtered out items lose all the entered data instead of simply hiding. I expected the filtered items to retain their values but it seems like they are being re-rendered from scratch. Am I missing something or is there a better way to handle this?
Check out a simple Plunker demonstration of my problem here
The HTML structure:
<body ng-controller="MainCtrl">
<input type="search" ng-model="q" placeholder="filter sites...">
<my-directive ng-repeat="site in sites | filter:q" site="site"></my-directive>
</body>
The JavaScript:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.sites = [
{name: 'site 1', id:'site1'},
{name: 'site 2', id:'site2'}
];
});
app.directive('myDirective', function($compile) {
return {
restrict: 'E',
scope: {
site: '=',
},
template: '<h1>{{site.name}}</h1>Value: <input name="{{site.id}}">'
};
});