Question

我正在读取csv文件（test.csv）的内容并将其存储在变量（dataArray）中，我必须将此dataArray中的值显示为HTML5中的表。我将这些值从dataArray移动到$scope.sushi，并使用此变量创建了一个HTML表格，但数据未显示在表格中。

app.js：

    $.get("test.csv").then(function(data) {
            //window.alert($scope.rowSplit(data,"#"));
            var rows = data.split("\r\n");
            // var array = string.split('#');
            // window.alert("Rows"+rows[0]);
            window.alert("inside datasplit"+rows[1]);
            if(rows.length > 0){
                var firstRowCells = rows[0].split(",");
                var dataArray = new Array();
                for (var i=1; i < rows.length; i++)
                {
                    var cells = rows[i].split(",");
                     var obj = {};
                    for(var j=0; j < cells.length; j++)
                    {
                        obj[firstRowCells[j]] = cells[j];
                    }
                    dataArray.push(obj);
                }

                    //window.alert(dataArray);
                    $scope.sushi=dataArray;
              // window.alert("$scope.sushi*********************8"+JSON.stringify($scope.sushi));
            } 

html file sampletableangular.html

        <div class="container">
      <form> 
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Filter" ng-model="searchcon">
          </div>      
        </div>
      </form> 
        <div id="exportdata">
      <table class="table table-bordered table-striped tablelink">

        <thead>
          <tr>
            <td>
              <a href="#" ng-click="sortType = 'issueno'; sortReverse = !sortReverse">
                issue no
                <span ng-show="sortType == 'issueno' && !sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="sortType == 'issueno' && sortReverse" class="fa fa-caret-up"></span>
              </a>
            </td>
            <td>
              <a href="#" ng-click="sortType = 'dateassigned'; sortReverse = !sortReverse">
              date assigned
                <span ng-show="sortType == 'dateassigned' && !sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="sortType == 'dateassigned' && sortReverse" class="fa fa-caret-up"></span>
              </a>
            </td>
            <td>
              <a href="#" ng-click="sortType = 'assignedby'; sortReverse = !sortReverse">
              assigned by
                <span ng-show="sortType == 'assignedby' && !sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="sortType == 'assignedby' && sortReverse" class="fa fa-caret-up"></span>
              </a>
            </td>
            <td>
              <a href="#" ng-click="sortType = 'description'; sortReverse = !sortReverse">
              description
                <span ng-show="sortType == 'description' && !sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="sortType == 'description' && sortReverse" class="fa fa-caret-up"></span>
              </a>
            </td>
            <td>
              <a href="#" ng-click="sortType = 'priority'; sortReverse = !sortReverse">
              priority
                <span ng-show="sortType == 'priority' && !sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="sortType == 'priority' && sortReverse" class="fa fa-caret-up"></span>
              </a>
            </td>
            <td>
              <a href="#" ng-click="sortType = 'targetdate'; sortReverse = !sortReverse">
              target date
                <span ng-show="sortType == 'targetdate' && !sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="sortType == 'targetdate' && sortReverse" class="fa fa-caret-up"></span>
              </a>
            </td>
            <td>
              <a href="#" ng-click="sortType = 'status'; sortReverse = !sortReverse">
              status
                <span ng-show="sortType == 'status' && !sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="sortType == 'status' && sortReverse" class="fa fa-caret-up"></span>
              </a>
            </td>
            <td>
              <a href="#" ng-click="sortType = 'attachment'; sortReverse = !sortReverse">
              attachment
                <span ng-show="sortType == 'attachment' && !sortReverse" class="fa fa-caret-down"></span>
                <span ng-show="sortType == 'attachment' && sortReverse" class="fa fa-caret-up"></span>
              </a>
            </td>
          </tr>
        </thead>

        <tbody>
          <tr ng-repeat="roll in sushi | orderBy:sortType:sortReverse | filter:searchcon">
            <td ng-click="display(roll.issueno);"><a href="#">{{ roll.issueno }}</a></td>
            <td>{{ roll.dateassigned }}</td>
            <td>{{ roll.assignedby }}</td>
            <td>{{ roll.description}}</td>
            <td>{{ roll.priority}}</td>
            <td>{{ roll.targetdate}}</td>
            <td>{{ roll.status}}</td>
            <td>{{ roll.attachment}}</td>
          </tr>
        </tbody>

      </table> 
      </div>

and the contents in test.csv:

issue no ,date assigned ,assigned by ,description ,priority ,target date ,status ,attachment
1001,1/24/2015,TE_002,Dev,1,3/4/2016,pending,file1
1002,2/20/2016,TE_002,Dev,1,3/4/2016,pending,file52
1003,4/5/2016,SD_003,Des,2,3/1/2016,pending,file4
1004,2/1/2016,TE_002,Test,1,5/19/2016,completed,file23
1005,8/27/2016,TL_001,Des,3,12/18/2016,pending,file41
1006,10/16/2016,TE_002,Dev,3,10/25/2016,completed,file35
1007,7/13/2016,TE_003,Test,5,8/7/2016,pending,file12

我必须使用$scope.sushi变量将csv文件中的值显示为HTML格式的表格。

Answer 1

看起来你正在混合使用jQuery和Angular。

您使用jQuery $.get("test.csv")发出请求，然后更新角度$scope。当你这样做时，角度没有注意到变化。

尝试使用apply包装$ scope update以强制使用角度摘要：

$scope.$apply(function () {
    $scope.sushi=dataArray;
});

或使用角度$http service发出请求。

将JSON数组中的值显示为HTML5中的表

1 个答案: