Thank you for your help.
The json data is displayed in the list with checkbox as ng-repeat.
When I checked the checkbox,
in the code below
in
I would like to have the number checked dynamically displayed.
(Initial value 0)
<html lang="ja"ng-app="MyApp">
<head>
<metacharset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="components/monaca-onsenui/css/onsenui.css">
<link rel="stylesheet" href="components/monaca-onsenui/css/onsen-css-components.css">
<link rel="stylesheet" href="css/style.css">
<script src="components/monaca-onsenui/js/angular/angular.js">/script>
<script src="components/angular-resource/angular-resource.min.js">/script>
<script src="components/monaca-onsenui/js/onsenui.js">/script>
<script language="javascript">
varmodule=angular.module('MyApp', ['onsen', 'ngResource'));
module.controller('UserController',
functionUserController($scope,$resource){
// Item extraction
$scope.getItemList=function(){
$resource("item2.json").get(function(data){
$scope.xxxList=data.xxx;
});
}
}
);
</script>
<title>Number of checks</title>
</head>
<body>
<!--Top Page-->
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="center">Search </div>
</ons-toolbar>
<div class="container"ng-controller="UserController">
<div>/{{bukiList.length}}</div>
<ons-list class="dl-horizontal" class="example-animate-container"ng-init="getItemList()">
<ons-list-item modulator="tapable" ng-repeat="item in xxxList|filter:q">
<ons-row>
<ons-col width="30px">
<div></div>
</ons-col>
<ons-col>
<!--[{{$index+1}}]--><label class="checkbox">
<input type="checkbox"ng-model="check1Selected"ng-change="onCheckBoxChange()">
<div class="checkbox__checkmark">/div>
<span class="ons-checkbox-inner">{{item.id}}{{item.name}}</span>
</label>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</div>
</ons-page>
</ons-navigator>
</body>
</html>Item2.json states as follows:
{
"xxx": [
{ "id": "1", "name": "aaa", "syurui": "ccc"},
{ "id": "2", "name": "bbb", "syurui": "ccc"}
]
}
I would appreciate it if you could let me know.
Thank you for your cooperation.
Specify item.checked for ng-model and count by $scope.countChecked().
<html lang="ja"ng-app="MyApp">
<head>
<metacharset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="components/monaca-onsenui/css/onsenui.css">
<link rel="stylesheet" href="components/monaca-onsenui/css/onsen-css-components.css">
<link rel="stylesheet" href="css/style.css">
<script src="components/monaca-onsenui/js/angular/angular.js">/script>
<script src="components/angular-resource/angular-resource.min.js">/script>
<script src="components/monaca-onsenui/js/onsenui.js">/script>
<script language="javascript">
varmodule=angular.module('MyApp', ['onsen', 'ngResource'));
module.controller('UserController',
functionUserController($scope,$resource){
// Item extraction
$scope.getItemList=function(){
$resource("item2.json").get(
function(data){
$scope.xxxList=data.xxx;
});
}
$scope.countChecked=function(){
if(angular.isArray($scope.xxxList)){
return$scope.xxxList.filter(function(item){
return item.checked;
}).length;
} else {
return 0;
}
};
}
);
</script>
<title>Number of checks</title>
</head>
<body>
<!--Top Page-->
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="center">Search </div>
</ons-toolbar>
<div class="container"ng-controller="UserController">
<div>{{countChecked()}}/{{bukiList.length}}</div>
<ons-list class="dl-horizontal" class="example-animate-container"ng-init="getItemList()">
<ons-list-item modulator="tapable" ng-repeat="item in xxxList|filter:q">
<ons-row>
<ons-col width="30px">
<div></div>
</ons-col>
<ons-col>
<!--[{{$index+1}}]--><label class="checkbox">
<input type="checkbox"ng-model="item.checked"ng-change="onCheckBoxChange()">
<div class="checkbox__checkmark">/div>
<span class="ons-checkbox-inner">{{item.id}}{{item.name}}</span>
</label>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</div>
</ons-page>
</ons-navigator>
</body>
</html>
© 2024 OneMinuteCode. All rights reserved.