Ng-init, если массив еще не создан

Я пытаюсь создать шаблон для приложения и хочу отображать динамический список с именами. поэтому я получил этот код, чтобы показать список и добавить/удалить строки;

<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 выражениях?

Вся помощь оценивается. Спасибо заранее

Ответы

Ответ 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">

Смотрите демо здесь.

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

Ответ 2

Я не думаю, что ng-init будет правильно оценивать условные утверждения. Но вы можете реорганизовать условие в функцию контроллера и вызвать функцию из ng-init.

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

Просто положите свою условную оценку в функцию на область контроллера.

Ответ 3

Я думаю, вы пытаетесь решить неправильную проблему.

Проблема заключается в том, что вы разрешаете действие, прежде чем данные будут загружены или готовы. Вторая проблема заключается в том, что вы используете выражение в ng-click, где должна быть функция области видимости или функция контроллера.

Итак...

Отключить эту кнопку, если форма не готова.
Используйте ваш контроллер для управления этими взаимодействиями.

Итак, вот пример контроллера. Тайм-аут $был добавлен для имитации задержки загрузки данных в вашу переменную $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 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>

Кроме того, здесь обязательный Plunker для вас, чтобы увидеть это в действии.