Angularjs 在HTML5中显示从JSON数组到表的值

我正在做一个函数，读取csv文件（test.csv）的内容并将其存储在变量（dataArray）中，我必须在HTML5中将此dataArray中的值显示为一个表。我将这些值从

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

$.get（“test.csv”）。然后（函数（数据）{
//window.alert（$scope.rowspit（数据“#”）；
var rows=data.split（“\r\n”）；
//var数组=string.split（“#”）；
//window.alert（“行”+行[0]）；
window.alert（“内部数据分割”+行[1]）；
如果（rows.length>0）{
var firstRowCells=行[0]。拆分（“，”；
var dataArray=新数组（）；
对于（变量i=1；i

---

我必须使用

$scope.sushi

变量将csv文件中的值显示为HTML表格。

看起来您将jQuery和Angular混合在一起

使用jQuery

$.get（“test.csv”）

发出请求，然后更新angular

$scope

。执行此操作时，angular不会注意到更改

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

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

---

或者使用angular来发出请求。

看起来您正在混合使用jQuery和angular

使用jQuery

$.get（“test.csv”）

发出请求，然后更新angular

$scope

。执行此操作时，angular不会注意到更改

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

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

---

或者使用angular命令发出请求。

控制台中的任何错误都是整个HTML代码，还是只是其中的一部分？它只是一个表div控制台中的任何错误都是整个HTML代码，还是只是其中的一部分？它只是一个表div