个人中心
gpt4 book ai didi

javascript - Ionic - 如何在 Ionic 复选框中获取所选项目

转载 作者：行者123 更新时间：2023-12-01 04:01:15 24 4
gpt4 key购买 nike

我想在 Ionic 复选框中获取选定的项目。因此，当用户选中复选框时，我想知道他/她选择了哪本书。

这是我的代码片段:

        <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>

运行代码时，如下所示:

enter image description here

我想使用 ng-model 但我不知道如何使用它。有人可以帮助我吗，因为我是 Ionic 和 AngularJS 的新手，谢谢!

更新:非常抱歉，我没有提供 Controller 的代码片段，以下是代码:

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

最佳答案

您可以在每个值中有一个用于checked的变量，并将其作为model变量绑定(bind)到复选框

演示

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>

关于javascript - Ionic - 如何在 Ionic 复选框中获取所选项目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42173116/

24 4 0
文章推荐： Javascript 转换仅在第二次悬停后才起作用
文章推荐： javascript - OnKeyPress 工作正常，但 keyDown 没有任何反应
文章推荐： python - Pandas DataFrame groupby 具有多索引的时间戳频率
文章推荐： javascript - 使用 Mozilla React 表单重新排序表单控件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com