Question

我想在单独的部分中显示我的模型，或者作为表格中的子部分显示。例如，Newyork表将显示所有Newyork数据，Florida表将显示所有佛罗里达数据。我有一个plunker来描述我是如何实现它的。我也在下面给出了它，以防万一将来编辑plunker。我想知道它是否可以动态完成。我的意思是，如果状态的数量更高，我将最终添加越来越多的html表。请帮忙。

//scripts.js
var module = angular.module("app", []);

var appCtrl = [
  "$scope",
  function($scope){
    $scope.trackingType = "Unverified Offsets By States";

    $scope.exists = function(val) {
            for (var i = 0; i < $scope.unVerifiedOffsets.length; i++) {
                if ($scope.unVerifiedOffsets[i].sortKey === val) {
                    console.log('Loop is going to break.');
                    return true;
                }
            }
            return false;
        };

    $scope.unVerifiedOffsets = [{
      "offset_Id": 1997153,
      "amount": -3375987.81,
      "sortKey": 3
    }, {
      "offset_Id": 1995696,
      "amount": -1000,
      "sortKey": 3
    }, {
      "offset_Id": 1997148,
      "amount": -30,
      "sortKey": 3
    }, {
      "offset_Id": 1997154,
      "amount": -10.06,
      "sortKey": 3
    }, {
      "offset_Id": 1996360,
      "amount": 2.15,
      "sortKey": 3
    }, {
      "offset_Id": 1997145,
      "amount": 75,
      "sortKey": 3
    }, {
      "offset_Id": 1997143,
      "amount": 200,
      "sortKey": 3
    }, {
      "offset_Id": 1997146,
      "amount": 200,
      "sortKey": 3
    }, {
      "offset_Id": 1997144,
      "amount": 200,
      "sortKey": 3
    }, {
      "offset_Id": 1997141,
      "amount": 700,
      "sortKey": 3
    }, {
      "offset_Id": 1997147,
      "amount": 1793.24,
      "sortKey": 3
    }, {
      "offset_Id": 1997152,
      "amount": 41885.8,
      "sortKey": 3
    }, {
      "offset_Id": 1997151,
      "amount": 90081.62,
      "sortKey": 3
    }, {
      "offset_Id": 1997142,
      "amount": 144634.81,
      "sortKey": 3
    }, {
      "offset_Id": 1997150,
      "amount": 336146,
      "sortKey": 3
    }, {
      "offset_Id": 1997157,
      "amount": 0,
      "sortKey": 4
    }];
  }];

module.controller("appCtrl",  appCtrl);


//index.html
<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <link data-require="bootstrap@*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <link data-require="bootstrap-css@*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.js"></script>
    <script data-require="angular.js@*" data-semver="1.2.1" src="http://code.angularjs.org/1.2.1/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="appCtrl">
    <h3>{{ trackingType }}</h3>
    <div data-ng-show="unVerifiedOffsets && unVerifiedOffsets.length > 0 && exists(1)">
        <h4 class="span12">Texas</h4>
        <table class="table table-bordered table-hover table-striped">
            <thead>
              <tr>
                <th></th>
                <th>Amount</th>
                <th>Sort Key</th>
              </tr>
            </thead>
            <tbody>
              <tr data-ng-repeat="uvo in unVerifiedOffsets | filter: { sortKey : 1 }">
                <td>
                  <input type="checkbox" value="{{ uvo.offset_Id }}" />
                </td>
                <td>{{ uvo.amount | currency }}</td>
                <td>{{ uvo.sortKey }}</td>
              </tr>
            </tbody>
      </table>
    </div>

    <div data-ng-show="unVerifiedOffsets && unVerifiedOffsets.length > 0 && exists(2)">
        <h4 class="span12">California</h4>
        <table class="table table-bordered table-hover table-striped">
            <thead>
              <tr>
                <th></th>
                <th>Amount</th>
                <th>Sort Key</th>
              </tr>
            </thead>
            <tbody>
              <tr data-ng-repeat="uvo in unVerifiedOffsets | filter: { sortKey : 2 }">
                <td>
                  <input type="checkbox" value="{{ uvo.offset_Id }}" />
                </td>
                <td>{{ uvo.amount | currency }}</td>
                <td>{{ uvo.sortKey }}</td>
              </tr>
            </tbody>
      </table>
    </div>

    <div data-ng-show="unVerifiedOffsets && unVerifiedOffsets.length > 0 && exists(3)">
        <h4 class="span12">New york</h4>
        <table class="table table-bordered table-hover table-striped">
            <thead>
              <tr>
                <th></th>
                <th>Amount</th>
                <th>Sort Key</th>
              </tr>
            </thead>
            <tbody>
              <tr data-ng-repeat="uvo in unVerifiedOffsets | filter: { sortKey : 3 }">
                <td>
                  <input type="checkbox" value="{{ uvo.offset_Id }}" />
                </td>
                <td>{{ uvo.amount | currency }}</td>
                <td>{{ uvo.sortKey }}</td>
              </tr>
            </tbody>
      </table>
    </div>

    <div data-ng-show="unVerifiedOffsets && unVerifiedOffsets.length > 0 && exists(4)">
        <h4 class="span12">Florida</h4>
        <table class="table table-bordered table-hover table-striped">
            <thead>
              <tr>
                <th></th>
                <th>Amount</th>
                <th>Sort Key</th>
              </tr>
            </thead>
            <tbody>
              <tr data-ng-repeat="uvo in unVerifiedOffsets | filter: { sortKey : 4 }">
                <td>
                  <input type="checkbox" value="{{ uvo.offset_Id }}" />
                </td>
                <td>{{ uvo.amount | currency }}</td>
                <td>{{ uvo.sortKey }}</td>
              </tr>
            </tbody>
      </table>
    </div>
  </body>

</html>

Answer 1

您可以制作一个简单的指令来合并html模板，然后简单地传入更改的变量。

这是一个Plunker显示它：

http://plnkr.co/edit/PIwj2TkF2d8RGHXNnOe7?p=preview

这将是html指令的一个例子：

<statetable ng-repeat="state in states" stateName="{{state.stateName}}" existsNumber="{{state.existsNumber}}" sortKey="{{state.sortKey}}"></statetable>

这是指令代码：

module.directive("statetable",function(){

  var directive = {
restrict: "EA",
replace: true,
template:[
  '<div data-ng-show="unVerifiedOffsets && unVerifiedOffsets.length > 0 && exists(existsnumber)">',
    '<h4 class="span12">{{statename}}</h4>',
    '<table class="table table-bordered table-hover table-striped">',
        '<thead>',
          '<tr>',
            '<th></th>',
            '<th>Amount</th>',
            '<th>Sort Key</th>',
          '</tr>',
        '</thead>',
        '<tbody>',
          '<tr data-ng-repeat="uvo in unVerifiedOffsets | filter: { sortKey : sortkey }">',
            '<td>',
              '<input type="checkbox" value="{{ uvo.offset_Id }}" />',
            '</td>',
            '<td>{{ uvo.amount | currency }}</td>',
            '<td>{{ uvo.sortKey }}</td>',
          '</tr>',
        '</tbody>',
  '</table>',
'</div>',
  ].join(''),
link:function(scope, element, attrs){
  scope.statename = attrs.statename;
  scope.existsnumber = attrs.existsnumber*1;
  scope.sortkey = attrs.sortkey;
},
 };
 return directive;
});

然后你需要控制器中的州名/密钥数组：

$scope.states = [{
      stateName: "Texas",
      existsNumber: "1",
      sortKey: "1"
    },
    {
      stateName: "California",
      existsNumber: "2",
      sortKey: "2"
    },
    {
      stateName: "New york",
      existsNumber: "3",
      sortKey: "3"
    },
    {
      stateName:"Florida",
      existsNumber: "4",
      sortKey: "4"
    }]

现在你可以使用正确的代码添加到states数组，它将起作用

Answer 2

凯尔的回答帮助了我。所以我接受他的答案，因为可能有人会寻找模板和衍生物。

但我不想使用指令。我更新了我的plunker，以下是我的做法。

我添加了状态列表，正如凯尔建议我的范围[基本上来自数据库]。

$scope.availableOffsets = [{
      stateName: "Texas",
      sortKey: "1"
    }, {
      stateName: "California",
      sortKey: "2"
    }, {
      stateName: "New york",
      sortKey: "3"
    }, {
      stateName: "Florida",
      sortKey: "4"
    }]

然后我更新了我的html文件，如下所示：

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <link data-require="bootstrap@*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <link data-require="bootstrap-css@*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.js"></script>
  <script data-require="angular.js@*" data-semver="1.2.1" src="http://code.angularjs.org/1.2.1/angular.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="appCtrl">
  <h3>{{ trackingType }}</h3>
  <div data-ng-repeat="avo in availableOffsets" data-ng-show="unVerifiedOffsets && unVerifiedOffsets.length > 0">
    <div data-ng-show="exists(avo.sortKey)">
      <h4 class="span12">{{ avo.stateName }}</h4>
      <table class="table table-bordered table-hover table-striped">
        <thead>
          <tr>
            <th></th>
            <th>Amount</th>
            <th>Sort Key</th>
          </tr>
        </thead>
        <tbody>
          <tr data-ng-repeat="uvo in unVerifiedOffsets | filter: { sortKey : avo.sortKey }">
            <td>
              <input type="checkbox" value="{{ uvo.offset_Id }}" />
            </td>
            <td>{{ uvo.amount | currency }}</td>
            <td>{{ uvo.sortKey }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>
</html>

这就是诀窍。注意用于包装早期div的div。

使用角度

2 个答案: