Angular JSを使用してチェックボックスからチェック値を取得する方法

角度の新しいJSです。私は以下のチェックボックスを持っており、データはWebサービスから来ています：Angular JSを使用してチェックボックスからチェック値を取得する方法

私の必要条件に従ってconsole.logの値は完全に正しいです。値を配列、つまりarr []にプッシュして文字列化する方法。私はこのようなコードを試してみました。..

医学的条件のリストを取得するために、これが役立つかもしれませ

$scope.parameter = "{}"; 
$scope.class0 = "{}"; 
$http.get('http://192.168.1.129:8080/apartment//member/medical/conditions/list').then(function(response) { 
    $scope.MedicalConditions = response.data.list; 
}); 

    $scope.$watchCollection('ids', function(newVal) {  
     $scope.parameter.class0 = $scope.ids; 
    }); 


$scope.alertdata = function() { 
    var parameter = { 
     "first_name": $scope.first_name, 

     "role": [{ 
      "role_id": 1, 
      "name": "Admin", 
      "details": "text" 
     }], 
     "associated": [{ 
      "associated_id": 1, 
      "associated_name": "Parent", 
      "primary_member_id": 1 
     }], 
     "class0": $scope.ids 
    } 
    parameter = JSON.stringify(parameter);

出典

2017-04-24 Prashanth Harish

https://jsfiddle.net/ruzw4Lfb/8/ –

@Sinchan $ scope.lists []は、データが動的から来ている私の場合には割り当てられます。..私の場合に行う方法.. –

あなたはフィドルを作成できますか？ –

<label ng-repeat="r in MedicalConditions track by $index"> 
<input ng-model="ids[$index]" type="checkbox" ng-change="valCh(r)"> {{r.conditions_name}} 
</label>

コントローラー・コード意志次のようになります。

var postApp = angular.module('EntityApp', []); 
postApp.controller('EntityAppCntroller', function($scope, $http, $window, $timeout, $location) { 

    //To fetch Medical Conditions List  
     $http.get('http://111.222.444:8080/apartment//member/medical/conditions/list').then(function(response) { 
      $scope.MedicalConditions = response.data.list; 
     }); 
     var list = []; 
     $scope.valCh = function(value) { 
      list.push(value); 
      JSON.stringify(list); 
     } 

     $scope.alertdata = function() { 
      var parameter; 
      parameter = { 
       "parameter": { 
        "first_name": $scope.first_name, 
        "medicalconditions": list 
       } 
      } 
      $http({ 
       url: 'http://111.222.333:8080/apartment//save/member/details', 
       method: 'POST', 
       headers: { 
        'Content-Type': 'application/json' 
       }, 
       data: JSON.stringify(parameter) 
      }).success(function(data, status) { 
       if (data.status == 'success') { 
        alert("User Created"); 
        $location.reload(); 
       } else if (data.status == 'failure') { 
        alert("Some failure please try again later !!!"); 
       } 
      }); 
     }; 
    });

出典

2017-04-24 08:34:04

：

angular.module('app', []) 
 
    .controller('Controller', function($scope) { 
 
    
 
    $scope.ids = {}; 
 
    $scope.arr = {}; 
 
    
 
    $scope.MedicalConditions = {}; 
 
    
 
    $scope.MedicalConditions[0] = {}; 
 
    $scope.MedicalConditions[0].value= true; 
 
    $scope.MedicalConditions[0].conditions_name= 'first value'; 
 
    
 
    $scope.MedicalConditions[1] = {}; 
 
    $scope.MedicalConditions[1].value= false; 
 
    $scope.MedicalConditions[1].conditions_name= 'seconde value'; 
 
    
 
    $scope.$watchCollection('ids', function(newVal) {  
 
     $scope.parameter.class0 = $scope.ids; 
 
    }); 
 
    
 
    
 
    $scope.parameter = {}; 
 
    $scope.parameter.firstname = 'dummy name'; 
 
    $scope.parameter.class0 = $scope.ids; 
 
    
 

 
    });

<!DOCTYPE html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-app="app"> 
 
    <div ng-controller="Controller"> 
 

 

 
    <label ng-repeat="r in MedicalConditions track by $index"> 
 
    <input ng-model="ids[$index]" type="checkbox" ng-checked="r.value" > {{ r.conditions_name}} 
 
    </label> 
 
    
 
    
 
    <br> 
 
    
 
    Parameter: {{parameter}} 
 

 

 
    </div> 
 
</body> 
 

 
</html>

出典

2017-04-24 06:33:44

投稿していただきありがとうございます。 $ scope.MedicalConditions [0] .conditions_name = '最初の値'という値を割り当てました。そうですね。しかし私の場合、データはWebサービスから動的に送られています。私の場合にそれをする方法。？ –

@PrashanthHarishスニペットの作業をするだけでした。 $ httpサービス経由でデータを取得するときに変数を割り当てることができます。 –

Ok .............試しています。 –

以下のように試してみてください...

var app = angular.module('exApp',[]); 
 

 
app.controller('ctrl', function($scope){ 
 
$scope.ids = []; 
 
$scope.arr = []; 
 
$scope.checkSelected = []; 
 
$scope.MedicalConditions = [{"conditions_name":"xxz","conditions_id":"1"}, {"conditions_name":"yyz","conditions_id":"2"}, {"conditions_name":"zzz","conditions_id":"3"}]; 
 
$scope.$watchCollection('ids', function(newVal) {  
 
    for (var i = 0; i < newVal.length; ++i) { 
 
    console.log(newVal[i]); 
 
    $scope.arr.push(newVal[i]);  
 
} 
 
}); 
 

 
$scope.checkAllR = function() { 
 
      $scope.checkAll = !$scope.checkAll; 
 

 
      if ($scope.checkAll) { 
 
       $scope.checkSelected = []; 
 
       angular.forEach($scope.MedicalConditions, function (checkR) {     
 
        
 
         checkR.check = $scope.checkAll; 
 
         $scope.checkSelected.push(checkR); 
 
        
 
       }); 
 
      } 
 
      else { 
 
       $scope.checkSelected = []; 
 
       angular.forEach($scope.MedicalConditions, function (checkR) { 
 
        var idx = $scope.checkSelected.indexOf(checkR); 
 
        checkR.check = $scope.checkAll; 
 
        $scope.checkSelected.splice(idx, 1); 
 
       }); 
 
      } 
 
     }; 
 

 
$scope.addChecked = function (checked) { 
 
      if ($scope.checkSelected == undefined || $scope.checkSelected == null) { 
 
       $scope.checkSelected = []; 
 
      } 
 

 
      var idx = $scope.checkSelected.indexOf(checked); 
 

 
      // delete if exists 
 
      if (idx > -1) { 
 
       $scope.checkSelected.splice(idx, 1); 
 
       checked.check = false; 
 
      } 
 
       // add 
 
      else { 
 
       $scope.checkSelected.push(checked); 
 
       checked.check = true;    
 
      }  
 
$scope.checkAll = $scope.checkSelected.length == $scope.MedicalConditions.length ? true : false; 
 
     }; 
 
var parameter = { 
 
    "first_name": $scope.first_name, 
 
    "middle_name": $scope.middle_name, 
 
    //"class0": /*stringified data i.e., arr[] */ 
 
}; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<body ng-app="exApp" ng-controller="ctrl"> 
 
Select All : <input type="checkbox" name="checkbox" value="1" ng-checked="checkAll" ng-click="checkAllR()"><br> 
 
<label ng-repeat="r in MedicalConditions"> 
 
<input type="checkbox" name="checkbox" class="check-nolabel" value="1" ng-checked="r.check" ng-click="addChecked(r)"> {{ r.conditions_name}} 
 
</label><br><br> 
 
{{checkSelected}} 
 
</body>

出典

2017-04-24 09:24:05

・ホープ、このことができます。

ここにコントローラがあります。

var myApp = angular.module('myApp', []); 

myApp.controller('MyCtrl', function($scope){ 
    $scope.ids = []; 

    $scope.MedicalConditions = [{ 
    _id: 1, 
    value: true, 
    condition: 'Condition 1' 
    }, { 
    _id: 2, 
    value: false, 
    condition: 'Condition 2' 
    }, { 
    _id: 3, 
    value: true, 
    condition: 'Condition 3' 
    }]; 
});

JsFiddle

出典

2017-04-24 09:44:49 anilCSE

あなたの投稿をありがとう。私はこの質問のために私の自己によって解決した.. :) –

Angular JSを使用してチェックボックスからチェック値を取得する方法

答えて

関連する問題