Ng-init nếu mảng chưa được tạo

Question

Tôi đang cố tạo mẫu cho ứng dụng và muốn hiển thị danh sách động có tên. vì vậy tôi đã nhận được mã này để hiển thị danh sách và thêm/xóa các hàng;

<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> 

điều như rằng khi mẫu này được nạp page.busnessRows sẽ rất có thể được nạp với hàng vì vậy tôi muốn thay đổi ng-init để chỉ tạo ra các mảng rỗng nếu businessRows không được khởi tạo.

Tôi đã thử ng-init="page.businessRows = page.businessRows.length < 1 ? [] : page.businessRows nhưng nó không hoạt động. Làm thế nào tôi được inteded để làm điều kiện trong biểu thức jsangular?

Tất cả trợ giúp đều được đánh giá cao. Cảm ơn trước

Answer 1

Bạn có thể làm điều này thay vì:

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

Cập nhật

tôi nhìn vào các mã phân tích cú pháp của AngularJS và nhận thấy rằng phiên bản 1.2 (hiện RC) hỗ trợ biểu ternary. Vì vậy, nếu bạn sử dụng AngularJS 1.2, điều này cũng sẽ làm việc (mặc dù nhiều tiết hơn so với mã trên):

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

Xem demo đây.

Tuy nhiên, mã ban đầu của bạn không thể làm việc nếu page.businessRows là null, bởi vì phân tích cú pháp sẽ không dereference length tài sản của null. Vì vậy, hãy cẩn thận ở đó.

Answer 2

Tôi không nghĩ rằng ng-init sẽ đánh giá các câu lệnh có điều kiện đúng cách. Nhưng bạn có thể cấu trúc lại điều kiện thành một hàm điều khiển và gọi hàm từ ng-init.

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

Chỉ cần đưa đánh giá có điều kiện vào chức năng trên phạm vi bộ điều khiển.

Answer 3

Tôi nghĩ bạn đang cố giải quyết vấn đề sai.

Vấn đề là bạn đang cho phép hành động xảy ra trước khi dữ liệu được tải hoặc sẵn sàng. Một vấn đề phụ là bạn đang sử dụng một biểu thức trong một ng-click, nơi một chức năng phạm vi hoặc chức năng điều khiển nên được.

Vậy ...

1. Vô hiệu hóa nút rằng nếu hình thức là chưa sẵn sàng.
2. Sử dụng bộ điều khiển của bạn để kiểm soát các tương tác này.

Vì vậy, đây là một ví dụ về bộ điều khiển. Thời gian chờ $ đã được thêm vào để mô phỏng tải dữ liệu bị trễ vào biến $ scope.page của bạn.

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); 
    } 
    }; 
}); 

...và chế độ xem HTML (chú ý ng khuyết tật và những ng nhấp chuột) (và thiếu 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> 

Ngoài ra, here's the obligatory Plunker for you to see this in action.