配列内のオブジェクトとして選択したチェックボックスとグループ名をオブジェクトとして送信する方法

Question

選択したチェックボックスオブジェクトデータのみをフォーム送信時に配列に渡す必要があります。

JSONデータを返すサービス：

[ 
    { 
    "groupName" : "A", 
    "groups": [ 
     "Painting", 
     "coloring" 
     ] 
    }, 
    { 
    "groupName" : "B", 
    "groups": [ 
     "drawing", 
     "writing" 
     ] 
    } 
] 

サービスが期待フォーマット、ユーザが選択したチェックボックスのカップルやフォームを送信：

{ 
"groups": [ 
    { 
    "category": "A", 
    "subCategory": "coloring" 
    }, 
    { 
    "category": "B", 
    "subCategory": "writing"  
    } 
] 
} 

マイコントローラ：

<div ng-controller="groupCtrl"> 
<form class="form" name="form" role="form" ng-submit="groupData()" autocomplete="off" novalidate> 
     <div ng-repeat="groups in groupsList"> 
      <p class="category">{{groups.groupName}}</p> 
      <p ng-repeat="group in groups.groups" > 
       <input type="checkbox" id="group" name="{{group}}" class="group" value="{{group}}" ng-model="groups"> {{group}} 
      </p> 
     </div> 
     <button type="submit" class="button">Save</button> 
</form> 

コントローラ：

angular.module('myApp') 
.controller("groupCtrl", function($rootScope, $scope, $state, $http) { 
    $http.get('group.json').success(function(groupsList) { 
     $scope.groupsList = groupsList; 
    }); 

    $scope.groups = { 

    } 
    $scope.groupData = function() { 
     $http.post('<service endpoint>', $scope.groups, { 

     }) 
     .success(function(){ 
      console.log("success"); 
     }) 
     .error(function(){ 
      console.log("failed."); 
     }); 
    } 

}); 

私は新しいです。コントローラの配列オブジェクトを作成し、配列のオブジェクトをユーザの選択/非選択チェックボックスで更新する方法のヘルプを探しています。

Answer 1

まず私はこのようなサービスにAPIのロジックを置く：そして、あなたは、コントローラからのAPIサービスを呼び出すと、あなたのビューモデルを構築する必要が

angular.module('myApp', []) 
//service to handle api communication 
.service('apiService', ['$http', function($http) { 
    return { 
    getGroups: function() { 
     return $http.get('http://superapi.com'); 
    } 
    } 
}]) 

：

api.getGroups().then(function(res) { 
    //JSON.parse will not be needed if your API returns a JSON body with application/json set as content-type 
    $scope.groupsList = JSON.parse(res.data.data); 
    //Build up the view model. 
    $scope.groupsList.forEach(function(g) { 
     $scope.selectedGroups.groups.push({ 
     category: g.groupName, 
     subCategory: [] 
     }); 
    }); 
    }, 
    function(error) { 
      //handle API errors gracefully here. 
    }); 

その後、フォームコンポーネントでng-modelを使用してデータを入力することができます

<form class="form" name="form" role="form" ng-submit="groupData()" autocomplete="off" novalidate> 
    <div ng-repeat="groups in groupsList track by $index"> 
     <p class="category">{{groups.groupName}}</p> 
     <p ng-repeat="group in groups.groups track by $index"> 
     <input ng-model="selectedGroups.groups[$parent.$index].subCategory" type="checkbox" id="group" name="{{group}}" class="group" ng-true-value="'{{group}}'" ng-init="checked=''" ng-false-value="''"> {{group}} 
     </p> 
    </div> 
    <button type="submit" class="button">Save</button> 
    </form> 

api resp onseモデルは二重ネストされた階層を持っているので、2つの入れ子になったng-repeatループが必要です。 ng-repeatが子スコープを作成し、親スコープは$ parentを使用してアクセスできるという事実を利用することができます。そうすれば、その情報を使ってng-modelを使ってビューモデルの正しい部分にバインドすることができます。あなたは、あなただけで、各サブカテゴリのインデックスにND-モデルをバインドすることができ、複数のサブカテゴリを選択することができるようにしたい場合は

ng-model="selectedGroups.groups[$parent.$index].subCategory" 

$親。$インデックスはgroupsList

の最初のNGリピートグループであります

ng-model="selectedGroups.groups[$parent.$index].subCategory[$index]" 

これは、サブカテゴリのインデックスを使用して配列内の特定の位置にバインドされます。ここ

は、その実施例である：ここでは

https://jsfiddle.net/zzq16t8u/4/

はあなたのために働いJSFiddleです： https://jsfiddle.net/zzq16t8u/3/

今、あなたは、システムによって指定された要求モデルにマップする際に、フォームのサブミットによって処理される関数でこれを処理する必要があります。 ng-true-valueを使って賢明なやり方をすることはできますが、文字列でしか動作しないため、データに対してJSON.parseを実行する必要があります。リクエストを作成する準備が整ったら、リクエスト・モデルへのマッピングを処理する私の意見はより良いものになります。ここで

$scope.groupData = function() { 
    // map data to the request model specified 
    var requestModel = { 
    groups: [] 
    }; 
    $scope.selectedGroups.forEach(function(group) { 
    group.subCategory.forEach(function(subCat) { 
     requestModel.groups.push({ 
     category: group.category, 
     subCategory: subCat 
     }); 
    }); 
    }); 

たちはもはや要求モデルに直接結合しないので、私は、ここでのビューモデルを単純化していることに注意して、すべての作業JSFiddleです。

https://jsfiddle.net/zzq16t8u/15/

文字列、およびAPI私は本当のJSONとしてJSONを返すようにJSFiddleエコーサービスを取得する方法を見つけ出すことができなかったとして、JSON.parseはここだけが必要であることに注意してください、とないてください。この例のサービスはこのエコーサービスを使って実際のhttpレスポンスを模擬しているので、実際のhttpコールで置き換える必要があります。

希望します。