Ng-init 如果数组尚未创建

Question

我正在尝试为应用程序构建模板并希望显示带有名称的动态列表。所以我得到了这段代码来显示列表并添加/删除行；

<table ng-init="page.businessRows = []">
<thead>
    <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Phone</th>
    </tr>
</thead>
    <tr ng-repeat="row in page.businessRows">
        <td>
            <input type="text" ng-model="row.name" />
        </td>
        <td>
            <input type="text" ng-model="row.contact" />
        </td>
        <td>
            <input type="text" ng-model="row.phone" />
        </td>
        <td>
            <button ng-click="page.businessRows.splice($index,1)">
                Remove
            </button>
        </td>
    </tr>
</table>
<button class="btn" ng-click="page.businessRows.push({})">addRow</button>

加载此模板时 page.busnessRows 很可能会加载行，因此我想更改 ng-init 以仅在未初始化 businessRows 时创建空数组。

我试过ng-init="page.businessRows = page.businessRows.length < 1 ? [] : page.businessRows，但没用。我如何在 jsangular 表达式中做条件？

感谢所有帮助。提前致谢

Answer 1

您可以这样做：

<table ng-init="page.businessRows = page.businessRows || []">

更新

我查看了 AngularJS 的解析器代码，注意到 1.2 版（当前为 RC）支持三元表达式。所以如果你使用 AngularJS 1.2，这也可以工作（虽然比上面的代码更冗长）：

<table ng-init="page.businessRows = page.businessRows == null ? [] : page.businessRows">

在此处查看demo。

但是，如果 page.businessRows 是 null，您的原始代码可能无法工作，因为解析器将无法取消引用 null 的 length 属性。所以要小心。

Answer 2

我认为 ng-init 不会正确评估条件语句。但是您可以将条件重构为控制器函数并从 ng-init 调用该函数。

<table ng-init="initializeBusinessRows(page.businessRows)">

只需将您的条件评估放在控制器范围内的函数中。

Answer 3

我认为你试图解决错误的问题。

问题是您允许在数据加载或准备好之前执行操作。第二个问题是您在 ng-click 中使用了一个表达式，该表达式应该是作用域函数或控制器函数。

所以...

1. 如果表单尚未准备好，请禁用该按钮。
2. 使用您的控制器控制这些交互。

下面是控制器的示例。添加 $timeout 是为了模拟将数据延迟加载到 $scope.page 变量中。

app.controller('MyCtrl', function($scope, $timeout, $window) { 
  //Timeout to simulate the asynchronous load
  //of the page object on the $scope
  $timeout(function(){
    $scope.page = {
      businessRows: []
    };
  }, 2000);


  //scope method to add a row.
  $scope.addRow = function (){
    //for safety's sake, check to see if the businessRows array is there.
    if($scope.page && angular.isArray($scope.page.businessRows)) {
      $scope.page.businessRows.push({});
    }
  };

  //scope method to remove a row
  $scope.removeRow = function(index, row) {
    if($window.confirm('Are you sure you want to delete this row?')) {
      $scope.page.businessRows.splice(index, 1);
    }
  };
});

... 和 HTML 视图（注意 ng-disabled 和 ng-click）（以及缺少 ng-init）：

  <div ng-controller="MyCtrl">
    <table>
      <thead>
        <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Phone</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="row in page.businessRows">
            <td>
                <input type="text" ng-model="row.name" />
            </td>
            <td>
                <input type="text" ng-model="row.contact" />
            </td>
            <td>
                <input type="text" ng-model="row.phone" />
            </td>
            <td>
                <button ng-click="removeRow($index, row)">
                    Remove
                </button>
            </td>
        </tr>
      </tbody>
    </table>
    <button class="btn" ng-disabled="!page" ng-click="addRow()">addRow</button>
  </div>

另外，here's the obligatory Plunker for you to see this in action。