Angular: Empty Fiddle
http://angularjs.org/
by mckennatim
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-app="stuffApp">
<div ng-controller="InpCtrl">needed
<ul class="list unstyled">
<li ng-repeat="item in list | filter:{done:false} | filter:query">
<input type="checkbox" ng-model="item.done"> <span class="done-{{item.done}}">{{item.item}}</span>
</li>
</ul>
</div>
<div ng-controller="GottenCtrl">
<form ng-submit="rubmit()">
<input ng-model="query" placeholder='search old lists'>
<input type="submit" id="submit2" value="Append" />
</form>gotten previously
<ul class="gotten unstyled">
<li ng-repeat="got in list | filter:{done:true} | filter:query">
<input type="checkbox" ng-click="clearTbox()" ng-model="got.done"> <span class="done-{{got.done}}">{{got.item}}</span>
</li>
</ul>
</div>
</div>
JavaScript
var app = angular.module('stuffApp');
app.factory('Data', function () {
return [{
id: '26',
item: 'banana',
done: false
}, {
id: '26',
item: 'coffee',
done: false
}, {
id: '26',
item: 'brown sugar',
done: false
}, {
id: '26',
item: 'bacon',
done: false
}, {
id: '26',
item: 'apples',
done: false
}, {
id: '26',
item: 'brown gravy',
done: true
}, {
id: '26',
item: 'bags',
done: true
}, {
id: '26',
item: 'applesauce',
done: true
}, {
id: '26',
item: 'sugar',
done: true
}, {
id: '26',
item: 'baby back ribs',
done: true
}, {
id: '26',
item: 'apple butter',
done: true
}];
});
app.controller('InpCtrl', function ($scope, Data) {
$scope.list = Data;
});
app.controller('GottenCtrl', function ($scope, Data) {
$scope.list = Data;
console.log($scope.list);
$scope.query = '';
$scope.rubmit = function () {
if ($scope.query) {
$scope.list.push({
id: 33,
item: this.query,
done: false
});
$scope.query = '';
}
};
$scope.clearTbox = function () {
$scope.query = '';
};
});