Fatal编程技术网
  • javascript/
  • Javascript 用angularjs填充jquery移动表

Javascript 用angularjs填充jquery移动表

javascript jquery angularjs jquery-mobile

Javascript 用angularjs填充jquery移动表,javascript,jquery,angularjs,jquery-mobile,Javascript,Jquery,Angularjs,Jquery Mobile,我有一个表格，它是在库的帮助下使用angularjs开发的：AngularSmartTable。这很好，但是我想要更多的功能，所以我想使用jquerymobile。我遇到的问题是，表格正在与标题一起形成，但我重复的行没有显示任何数据，我的js调试也没有显示任何错误。这是我的密码： html: 正如我所说的，带有列标题的行显示得很好，但实际数据显示得不好，这使我相信我的ng repeat存在问题。我之前的表实际上显示的数据基本上是相同的代码，除了我的标记：st table=“tableRows”（

我有一个表格，它是在库的帮助下使用
angularjs
开发的：
AngularSmartTable
。这很好，但是我想要更多的功能，所以我想使用jquerymobile。我遇到的问题是，表格正在与标题一起形成，但我重复的行没有显示任何数据，我的js调试也没有显示任何错误。这是我的密码：

html:

正如我所说的，带有列标题的行显示得很好，但实际数据显示得不好，这使我相信我的ng repeat存在问题。我之前的表实际上显示的数据基本上是相同的代码，除了我的
标记：
st table=“tableRows”
（对于智能表库），然后我的重复是：
ng repeat=“row in tableRows”
。这是我第一次同时使用
angularjs
和
jquery-mobile
进行工作，因此非常感谢您的帮助

它不会重复，因为您没有将tableRows附加到控制器实例@
作用域.tableRows
，而是在作用域上，您通过执行
cont.tableRow
从控制器实例别名引用它

尝试：-

我觉得这是件简单的事。但这很有道理，谢谢你，它工作得很好！ 
<body ng-controller="MyMainController as cont">
    <section ng-controller="PanelController as panel">
        <span>
            *span items*
        </span>
        <div class="panel" ng-show="panel.isSelected(1)">
            <table data-role="table" id="table-custom-2" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-theme="b" data-column-btn-text="Columns" data-column-popup-theme="a">
                <thead>
                    <tr class="ui-bar-d">
                        <th></th>
                        <th data-priority="1" st-sort="account">Account #</th>
                        <th st-sort="name">Campaign Name</th>
                        <th data-priority="4">Comments</th>
                        <th data-priority="2" st-sort="priority">Priority</th>
                        <th data-priority="2" st-sort="zipCode">Zip Code</th>
                        <th data-priority="2" st-sort="address">Address</th>
                        <th data-priority="2" st-sort="status">Status</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="row in cont.tableRows">
                        <td>{{row.checked}}</td>
                        <td>{{row.account}}</td>
                        <td>{{row.name}}</td>
                        <td>{{row.comments}}</td>
                        <td>{{row.priority}}</td>
                        <td>{{row.zipCode}}</td>
                        <td>{{row.address}}</td>
                        <td>{{row.status}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="panel" ng-show="panel.isSelected(2)" id="map-canvas">
            Map
        </div>
    </section>
    *my javascript tags*
</body>

(function(){
var myVar = angular.module('cont', []);

myVar.controller('MyMainController', ['$scope', '$filter', function (scope, filter){
    scope.tableRows = [
    {
        checked: false,
        account: 1,
        name: "Name1",
        comments: "Comments`",
        priority: "High",
        zipCode: 11111,
        address: "Address",
        status: "Active"  
    },
    {
        checked: true,
        account: 2,
        name: "Name2",
        comments: "Comments2",
        priority: "Medium",
        zipCode: 22222,
        address: "Address2",
        status: "Active" 
    },
    {
        checked: false,
        account: 3,
        name: "Name3",
        comments: "Comments3",
        priority: "Low",
        zipCode: 33333,
        address: "Address3",
        status: "Active" 
    },
    {
        checked: false,
        account: 4,
        name: "Name4",
        comments: "",
        priority: "Low",
        zipCode: 44444,
        address: "Address4",
        status: "Active" 
    }];
}]);

leadPlanning.controller('PanelController', function(){
    this.tab = 1;
    this.selectTab = function(setTab) {
        this.tab = setTab;
    }
    this.isSelected = function(checkTab) {
        return this.tab === checkTab;
    }
});

})();

 this.tableRows = [...