2016-10-20 34 views
0

私はangularjsをかなり使い慣れています。今私は、チェックボックスがチェックされた場合、私がチェックしますか(下記のように)春のコントローラで角度制御とスプリング制御

<input id="{{fields[3].name}}" type="checkbox" value="{{fields[3].name}}" ng-checked="selection.indexOf(fields[3].name) > -1" ng-click="toggleSelection(fields[3].name)" class="col-xs-1" /> 

私のビューのいずれかのチェックボックスがありますか?

@RequestMapping(value = "/test/{id}/accept", method = RequestMethod.POST, produces = "application/json", consumes = "application/json") 
     public @ResponseBody ResponseBean acceptData(
       @PathVariable("id") String id, 
       @RequestBody AcceptPayload payload, Model model, 
       HttpServletRequest request, HttpServletResponse response) { 
.... 
    } 

任意のコード例は

+0

ng-modelを追加してHTTPコールを送信すると、チェックボックス情報を送信できます。 – Jigar7521

+0

いつチェックしますか?提出後?クライアント側では?リアルタイムで? – Mitchapp

答えて

1

を参照してください。

ウェブページは以下のようにng-repeatを持ちます。変数リストは、JSON配列が含まれています

<tr ng-repeat="obj in list"> 
    <td> 
      <input id="{{obj.name}}" type="checkbox" value="{{obj.name}}" 
      checklist-model="checkboxes" ng-checked="selection.indexOf(obj.name) > -1" 
      ng-click="toggleSelection(obj.name)" /> 
    </td> 
</tr> 

toggleSelection()関数は ** selectedItemsの**選択obj.nameの配列を取得し、変数配列に追加します:

$scope.selectedItems = []; 
$scope.toggleSelection = function toggleSelection(name) { 
    var idx = $scope.selectedItems.indexOf(name); 
    // is currently selected 
    if (idx > -1) { 
     $scope.selectedItems.splice(idx, 1); 
    } 
    // is newly selected 
    else { 
     $scope.selectedItems.push(name); 
    } 
}; 
私は、Webページにコントローラを打つことになるで

方法は以下のようになります。

$scope.execute = function() { 
    $http({ 
     method : 'GET', 
     url : 'trigger', 
     params : { 
        selectedItems : $scope.selectedItems 
       } 
     }).success(
      function(data, status, headers, config) { 
     }).error(
      function(data, status, headers, config) { 
      // called asynchronously if an error occurs 
      // or server returns response with an error status. 
    }); 
         }; 

コントローラのメソッドは、次のようになります。

@RequestMapping(value = "/trigger", method = RequestMethod.GET, headers = "Accept=application/json") 
public @ResponseBody String trigger(@RequestParam("selectedItems") List<String> selectedItems) throws NumberFormatException, Exception { 
     // Your method 
    } 

メソッドをGETからPOSTに変更できます。

0

AngularJSは、フロントエンドMVCライブラリであるのに役立ちます。スプリングコントローラはバックエンドです。これは、値がHTTP要求で前面から背面に送信されなければならないことを意味します。 HTMLにおいて、

ng-checked="someVariable" 

この値は、その後を通して、あなたのスプリング・コントローラにネットワークを介して送信されなければならない

$scope.someVariable 

と範囲内の角度アプリコントローラに捕捉することができる。例えば

、 HTTPリクエスト。何かのように、

$http({ method: 'POST', data: 'someVariable' url: '/someUrl'}) 
.then(function successCallback(response) { 
// this callback will be called asynchronously 
// when the response is available 
}, function errorCallback(response) { 
// called asynchronously if an error occurs 
// or server returns response with an error status. 
}); 

はあなたがコントローラに自分のWebページからチェックされたデータを送信する必要がありますhttps://docs.angularjs.org/api/ng/service/$http

関連する問題