如果数组尚未创建，则Ng init

Ng-init if array not yet created

本文关键字：Ng init 创建 数组 如果      更新时间：2023-09-26

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

<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表达式中创建条件？

感谢所有的帮助。提前感谢

您可以这样做：

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

更新

我查看了AngularJS的解析器代码，注意到1.2版本（目前为RC）支持三元表达式。因此，如果您使用AngularJS 1.2，这也会起作用（尽管比上面的代码更详细）：

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

请参阅此处的演示。

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

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

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

只是将您的条件求值放在控制器作用域上的函数中。

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

问题是，您允许在数据加载或准备好之前执行操作。第二个问题是，在作用域函数或控制器函数应该所在的位置，您正在使用ng单击中的表达式

所以。。。

  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被禁用和ng点击）（以及缺少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>

此外，这是Plunker必须让你看到的行动。

相关文章：