簡體   English   中英

在ng-repeat之后如何在每個表格行中添加手動單元格?

[英]How to add a manual cell in each table row after an ng-repeat?

我正在建立一個表,該表由ng-repeat填充,並遍歷了來自數據庫的列表。 這部分工作正常,但是我想有一個復選框,允許用戶選擇刪除哪些行。 我還想在表頭上有一個復選框,用作全選按鈕。

問題是,據我所知,ng-repeat循環包含有問題的行內的所有內容,使我無法在循環和行的末尾之間插入手動單元格。

有沒有一種方法可以在循環和行尾之間添加額外的單元格,例如使用ng-repeat-start和ng-repeat end?

這是我嘗試的一個例子。 顯然,這沒有用。

<table>
    <tr><th ng-repeat=" e in poistoavaimet">{{e}}</th></tr>
    <tr ng-repeat="i in poistolista | filter:sukunimiVal | filter:etunimiVal">
        <td ng-repeat-start=" key in poistoavaimet">{{i[key]}}</td>
        <td ng-repeat-end>
            <input type="checkbox" ng-model="poistovalinta.{{$index}}"> 
          {{$index}}</input>
        </td>
    </tr>
</table>

poistoavaimet包含從數組中提取的鍵。 Poistolista是從中提取密鑰的數組本身,其中包含來自數據庫的數據。 Poistovalinta是復選框值的變量。 poistovalinta.{{$index}}試圖在poistovalinta -array中創建一個具有行索引鍵的條目。

我將添加一段代碼,負責處理來自控制器的這些變量:

    $scope.haePoistettavat = function(){
            $http.get('/opiskelijahaku', {params: {'optio':2}})
              .then(function(res){
                    $scope.poistolista = res.data.message;
                    $scope.poistoavaimet = Object.keys($scope.poistolista[0]);
                    $scope.adminLista = {};
                    $scope.adminLista['poisto'] = true;
            }, function(error){
                    console.log(error)
            });
    }

此函數將帶有一個選項的http get發送到服務器,該選項告訴服務器返回正確的列表。 響應存儲在$scope.poistolista ,密鑰提取到數組$scope.poistoavaimet $scope.adminLista包含true / false值,這些值鏈接到多個對象中的ng-show。 當時的想法是只顯示其中之一。 這與問題沒有直接聯系。

感謝@RaphaMex消除了我對ng-repeat的誤解!

解決方案正是他所說的。 只需在重復后添加單元格即可。

這是固定版本:

            <table>
                    <tr><th ng-repeat=" e in poistoavaimet">{{e}}</th><th><input id="kaikki" type="checkbox" ng-model="kaikkiVal"></th></tr>
                    <tr ng-repeat="i in poistolista | filter:sukunimiVal | filter:etunimiVal">
                            <td ng-repeat=" key in poistoavaimet">{{i[key]}}</td>
                            <td><input type="checkbox" ng-model="poistovalinta"></td>
                    </tr>
            </table>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM