离子 - 如何获得离子复选框中的选定项目

问题描述：

我想获得离子复选框中的选定项目。所以，当用户选中复选框时，我想知道他/她选择了哪本书。离子 - 如何获得离子复选框中的选定项目

这里是我的代码片段：

 <ion-item ng-repeat="book in data.books"> 

       <div style="margin-left:110px;margin-right:10px;"> 
        {{book.name}} 
       </div> 

       <li class="item item-checkbox checkbox-balanced"> 

        <label class="checkbox"> 
         <input type="checkbox"> 
        </label> 
       </li> 

      </ion-item>

当运行的代码，它看起来像这样：

我想用NG-模型，但我不知道怎么用它。有人可以帮助我，因为我是Ionic和AngularJS的新手，感谢！

UPDATE：我感到非常抱歉，我没有提供控制器的代码片段，这里是代码：

.controller('DetailsCtrl', function ($scope, $http) { 
$http.get("") // some webservice url 
    .then(function (response) { 
     $scope.data = response.data; 
    }); 
});

答

你可以有一个变量checked中的每个值，并绑定该作为model变量的复选框

DEMO

var clubApp = angular.module('clubApp', ['ionic']) 
 
clubApp.controller('ctrlPlayer', ['$scope', function($scope) { 
 
    $scope.books = [{ 
 
    "name": "And the goog news is", 
 
    "checked": false 
 
    }, { 
 
    "name": "Girl on the train", 
 
    "checked": false 
 
    }]; 
 
$scope.getselected = function(){ 
 
    angular.forEach($scope.books,function(key,value){ 
 
     if(key.checked ==true) 
 
     { 
 
      alert(key.name); 
 
     } 
 
    }); 
 
} 
 

 
}]);

<!DOCTYPE html> 
 
<html ng-app='clubApp'> 
 
<head> 
 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
 
    <title></title> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <link rel="stylesheet" type="text/css" href="//code.ionicframework.com/1.0.0-beta.11/css/ionic.min.css"> 
 
    <script src="//code.ionicframework.com/1.0.0-beta.9/js/ionic.bundle.min.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.min.js"></script> 
 

 
    <script src="script.js"></script> 
 
</head> 
 
<body ng-controller="ctrlPlayer"> 
 
<ion-list> 
 
    <ion-checkbox ng-model=value.checked ng-repeat="(key, value) in books"> 
 
    <span>{{value.name}}</span> 
 
    </ion-checkbox> 
 
</ion-list> 
 
<button ng-click="getselected()" class="button button-positive"> 
 
      get selected 
 
</button> 
 
    <h1>{{selectedval}}</h1> 
 
</body> 
 

 
</html>

你好，谢谢你的回答。我非常抱歉，我没有提供控制器的代码。这是我的错误。对不起。我用标签“更新”更新了这个问题。你可以看一下吗？谢谢Sajeetharan – Antoni

没关系。我已经找到了解决方案:)谢谢:) – Antoni

@Antoni标记为答案，如果它有帮助 – Sajeetharan

离子 - 如何获得离子复选框中的选定项目

相关推荐