チェックボックスを使用してユーザーの選択に基づいてモーダル画面上のデータを表示

Question

"私は20のレコードをナビゲーションタブに表示しましたが、各レコードに対してチェックボックスにcoloumnを追加しました。 、8チェックボックスを使用して、ナビゲーションタブの上にある "編集"ボタンをクリックすると、ユーザーが編集できるようにModal画面に表示されるはずです

もしレコードを選択した場合は、5, 8, 6レコードはその特定の順序。

私はそれをgoogleしましたが、関連する投稿は見つかりませんでした。

<div ng-app="RecordApp" ng-controller="recordcontroller" class="container-fluid"> 

    <div class="input-group"> 
     <ul class="nav nav-tabs"> 
      <li role="menu" class="active"><a href="#" data-toggle="tab" >User Data</a></li> 
     </ul> 

     <table class="table"> 
      <thead> 
       <tr> 

        <th> 
         <a href="#">Select</a> 
        </th> 
        <th> 
         <a href="#" ng-click="SortBy = 'Test1'; Reverse = !Reverse;">Test1</a> 
        </th> 
        <th> 
         <a href="#" ng-click="SortBy = 'Test2'; Reverse = !Reverse;">Test2</a> 
        </th> 
        <th> 
         <a href="#" ng-click="SortBy = 'Test3'; Reverse = !Reverse;">Test3</a> 
        </th> 

       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="record in Records | orderBy:SortBy:Reverse "> 



        <td> 
         <input type="checkbox" checked="checked" ng-model="record.Selected" ng-change="Checked(record)" /> 
        </td> 

        <td>{{ record.Test1 }}</td> 
        <td>{{ record.Test2 }}</td> 
        <td>{{ record.Test3 }}</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 

次は、ナビゲーションタブの下

$http.get(pageBaseUrl + "api/records").success(function (records) { 
     $scope.Records = records; 
     $scope.IsLoading = false; 
    }); 

を取り込むための私のAngularJsコードされるボタンやモーダル画面のコードです：

<div class="input-group"> 
        <button type="button" data-target="#editRecords" data-toggle="modal" class="btn btn-primary navbar-btn"> 
         <span class="glyphicon glyphicon-floppy-disk"></span> 
         Edit Multiple Records 
        </button> 
       </div> 

    <div id="editRecords" class="modal" role="dialog" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
        <h2>Edit Data For Selected Records </h2> 
       </div> 
       <div class="modal-body"> 
        <table class="table-condensed table-striped"> 
         <thead> 
          <tr> 
           <th>Test 1</th> 
           <th>Test 2</th> 
           <th>Test 3</th> 
          </tr> 
         </thead> 
         <tbody> 
          <tr ng-repeat="record in Records | orderBy:SortBy:Reverse"> 
           <td><input type="text" class="form-control input-sm" /></td> 
           <td><input type="text" class="form-control input-sm" /></td> 
           <td><input type="text" class="form-control input-sm" /></td> 
          </tr> 
         </tbody> 
        </table> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-primary" ng-click="SaveRecords();">Save Records</button> 
        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="UnmarkForEdition()"> 
         Cancel 
        </button> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

ありがとう10以下は私のHTMLコードですコードは、ここに私の解決策です、

JSFiddle Demo

の

問題：

第1の目的は、コードを使用して、任意選択のチェックボックスが含まれている場合、私は確認してください。プロパティSelected:trueを含む任意のオブジェクトがある場合、上記のコードで

$scope.checkCheckbox = function(){ 
    return $filter('filter')($scope.Records, {Selected: true}).length === 0; 
} 

は、私は ng-repeat配列を確認し、何も存在しない場合、長さは、比較演算子を使用してゼロになり、Iは、ブール値を返します。これは、HTML要素 button属性 ng-disabledによって使用され、入力を無効にします。

<button type="button" ng-disabled="checkCheckbox()" data-target="#editRecords" data-toggle="modal" class="btn btn-primary navbar-btn"> 
       <span class="glyphicon glyphicon-floppy-disk"></span> 
       Edit Multiple Records 
      </button> 

場合はチェックボックスが選択されている入力のみが表示されますedit multiple records, button is clicked, I open the modal, and in the code I have added a simple NG-if`！

<tr ng-if="record.Selected" ng-repeat="record in Records | orderBy:SortBy:Reverse"> 
           <td><input type="text" class="form-control input-sm" /></td> 
           <td><input type="text" class="form-control input-sm" /></td> 
           <td><input type="text" class="form-control input-sm" /></td> 
          </tr> 

これで問題が解決するかどうかを教えてください。