I am a beginner in AngularJS and I have an issue, here my code:
$scope.categories = [{
"id": 506,
"name": "test"
}, {
"id": 510,
"name": "aaa"
}, {
"id": 1,
"name": "bbb"
}, {
"id": 2,
"name": "ccc"
}, {
"id": 3,
"name": "eee"
}, {
"id": 4,
"name": "fff"
}];
$scope.contents = [{
"id": 0,
"categoryId": 506,
"title": "test1"
}, {
"id": 1,
"categoryId": 506,
"title": "test2"
}, {
"id": 2,
"categoryId": 506,
"title": "test3"
}, {
"id": 3,
"categoryId": 1,
"title": "test4"
}];
<div>
<label>
<input type="radio" name="category" ng-model="cc" ng-value="" checked/>all
</label>
<label ng-repeat="categoryItem in categories" ng-init="i= $parent">
<input type="radio" name="category" ng-model="i.cc" ng-value="{{categoryItem.id}}" />{{categoryItem.id}}
</label>
</div>
<ul>
<li ng-repeat="content in contents | filter:{categoryId: cc||undefined}">
<h3>id:{{content.categoryId}}</h3>
<p>{{content.title}}</p>
</li>
</ul>
I would like to be able to see all the items by selecting radio, in addition, I would like to first of them was always selected. Like right now it not work and I really don't know why.
Some issues/changes:-
Do not use interpolation with ng-value, i.e ng-value="{{categoryItem.id}}" should be ng-value="categoryItem.id". ng-value can just be an expression or a scope property that will be assigned to the ng-model.
Do not use ng-init or $parent on the view, they are not desired patterns to use. Instead use dot rule. define the filter object in the controller and set the property categoryId on the filterobject as the ng-model for the radio buttons.
<input type="radio" name="category" ng-model="categoryFilter.categoryId" ng-value="categoryItem.id" />{{categoryItem.id}}
Just clear out the filter by setting categoryFilter to {} on click of all filter, and use ng-checked.
all
Just use the filter with the ng-repeat as follows:
<li ng-repeat="content in contents | filter:categoryFilter">
Demo
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.categoryFilter = {};
$scope.categories = [{
"id": 506,
"name": "test"
}, {
"id": 510,
"name": "aaa"
}, {
"id": 1,
"name": "bbb"
}, {
"id": 2,
"name": "ccc"
}, {
"id": 3,
"name": "eee"
}, {
"id": 4,
"name": "fff"
}];
$scope.clearFilter = function() {
$scope.categoryFilter = {};
}
$scope.contents = [{
"id": 0,
"categoryId": 506,
"title": "test1"
}, {
"id": 1,
"categoryId": 506,
"title": "test2"
}, {
"id": 2,
"categoryId": 506,
"title": "test3"
}, {
"id": 3,
"categoryId": 1,
"title": "test4"
}];
});<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="[email protected]" src="https://code.angularjs.org/1.2.23/angular.js" data-semver="1.3.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div>
<label>
<input type="radio" name="category1" ng-click="categoryFilter={}" ng-checked="!categoryFilter.categoryId" />all
</label>
<label ng-repeat="categoryItem in categories">
<input type="radio" name="category" ng-model="categoryFilter.categoryId" ng-value="categoryItem.id" />{{categoryItem.id}}
</label>
</div>
<ul>
<li ng-repeat="content in contents | filter:categoryFilter">
<h3>id:{{content.categoryId}}</h3>
<p>{{content.title}}</p>
</li>
</ul>
</body>
</html>