【问题标题】:way to get ion-checkbox values获取离子复选框值的方法
【发布时间】:2017-12-12 21:22:08
【问题描述】:

我正在尝试从复选框中获取值,以便我可以绑定它。 但我一直保持条件(真或假)

当我点击复选框时,它会像这样设置我的模型:

[9:真,15:真] 我想要的是一个平面数组,例如:

[9, 15] 有没有更好的方法从复选框中获取值并将它们设置在模型上的数组中?

enter image description here

    <ion-checkbox ng-repeat="model in models | filter:query" ng-model="order.models[model.id]" >{{model.model_number}} </ion-checkbox>
</ion-item>
current order: {{order}}

    .controller('compareModelsCtrl',['$scope','$http', '$state' ,
function($scope, $http, $state,$location) {
$http.get('js/data.json').success(function(data){
$scope.models = data;
$scope.whichmodel = $state.params.modelId;
//$scope.toggleStar = function(model){
// model.star = !model.star;
//}
$scope.order = {};

【问题讨论】:

    标签: angularjs ionic-framework


    【解决方案1】:

    默认情况下,Ionic 框架不这样做。在下面的代码中,您需要自定义函数,例如 format。因为,我没有你的data.json 文件,所以我模仿了两个离子复选框。

         <ion-content ng-controller="LoginCtrl">
           <ion-checkbox  ng-model="order[0]" ng-change="format()" >1 </ion-checkbox>
           <ion-checkbox  ng-model="order[1]" ng-change="format()" >2</ion-checkbox>
        current order: {{modifiedOrder}}
      </ion-content>
    

    并在控制器内部实现了以下功能。

    angular.module('ionic.example', ['ionic'])
    .controller('LoginCtrl', function($scope) {
    $scope.order={};
    $scope.format=function(){
      $scope.modifiedOrder=[];
      angular.forEach($scope.order, function(value, key) {
        if(value){
          $scope.modifiedOrder.push(parseInt(key));
        }
    });
    }
    });
    

    你之前的订单是modifiedOrder 请参阅此处的工作代码。 https://codepen.io/anon/pen/vXYvPG 祝你好运!

    【讨论】:

    • id":"0", "model_number":"BT168562.3", "rotor_drawing_number":4.01591, "material":"17-4 PH", "number_of_lobes":"5/6 ", "contour_length":51.00, "overall_length":55.00,
    • 我在数据 json 中有 100 个 id,如何将它们放入 ng-model="order[]"
    • 谢谢,它的工作原理是这样 {{model.model_number}} 当前订单:{{modifiedOrder}}
    • 好的,太好了!编码愉快。
    • 你好 Dinesh,我正在尝试使用 datajson 中的 id 和 id 显示其他值,这里有另一个信息 stackoverflow.com/questions/39380678/…,你能帮我吗
    【解决方案2】:

    在 Html 文件中,

    <ion-content padding>
      <ion-input type="text" placeholder="What's Your groups name?"></ion-input>
      <ion-list>
    
            <ion-item *ngFor="let friend of friendList">
              <ion-label>{{friend.name}}</ion-label>
              <ion-checkbox [(ngModel)]="friendsSelected[friend.name]"></ion-checkbox>
            </ion-item>  
        </ion-list>
        <button ion-button  (click)="save()">Save</button>
    </ion-content>
    

    在您的 TS 文件中 我创建了一个变量friendsSelected

     friendsSelected:any={};
    
       save(){
        var array = [];
        for(var i in this.friendsSelected) {
            console.log(this.friendsSelected[i]);
            if(this.friendsSelected[i] == true) {
                array.push(i);
            }
        }
        console.log(array);
      }
    

    【讨论】:

      猜你喜欢
      • 2018-07-30
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多