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 || []"> 

Update

Я смотрю на парсер кодах AngularJS и обратите внимание, что версия 1.2 (в настоящее время RC) поддерживает трехкомпонентное выражение. Так что если вы используете AngularJS 1.2, это также будет работать (хотя и более многословен, чем выше код):

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

См demo здесь.

Однако исходный код может не работать, если page.businessRows является null, потому что анализатор не разыменование length свойства null. Так что будьте осторожны.

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 (обратите внимание на нг-инвалидам и нг-клик) (и отсутствие нг-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.