CakePHP и AngularJS - оценка {{$ index}}

Question

Я использую CakePHP и AngularJS, и мне нужно проверить мою мультимодельную форму.

Например, это путь, создаются элементы:

echo $this->Form->input(
    $model . '.{{$index}}.url', 
    array(
     'value' => '{{link.url}}', 
     'label' => 'URL', 
     'div' => array(
      'class' => 'short' 
     ) 
    ) 
); 

Проверка в порядке. Выход для:

var_dump($this->Staticpage->validationErrors)

является

array(1) { ["StaticpageLink"]=> array(1) { [1]=> array(2) { ["title"]=> array(1) { [0]=> string(27) "This is a mandatory field." } ["url"]=> array(1) { [0]=> string(27) "This is a mandatory field." } } } } 

Проблема: если я использую этот {{$index}}, она оценивается правильно, но не появляется сообщение проверки. Если я установил, например, 1, появится сообщение.

В чем проблема? Каким будет правильный способ оценки индекса с помощью AngularJS?

---

Обновление: здесь более специфичная часть вида:

<div ng-repeat="link in links track by $index"> 
     <div ng-hide="link.remove"> 
    <?php 
      echo $this->Form->hidden(
       $model . '.{{$index}}.id', 
       array(
        'value' => '{{link.id}}' 
       ) 
      ); 
      echo $this->Form->hidden(
       $model . '.{{$index}}.remove', 
       array(
        'value' => '{{link.remove}}' 
       ) 
      ); 
      echo $this->Form->input(
       $model . '.{{$index}}.title', 
       array(
        'value' => '{{link.title}}', 
        'label' => 'Título', 
        'div' => array(
         'class' => 'short' 
        ) 
       ) 
      ); 
//continue... 

Как вы видите, он находится внутри ng-repeat.

Answer 1

Проблема в том,

Вы хотите отобразить проверку на стороне сервера с использованием кода на стороне клиента.

$index - код на стороне клиента, который является специфичным для AngularJS кодом javascript.

и вы хотите, чтобы код на стороне сервера, который является php, понимает, что такое $ index.

Сервер-сторона, cakePHP или любой php, никогда не знает, что означает $ index и никогда не узнает, что $ index будет 1,2,3,4,5 или что-то такое.

На стороне php ваш код в <? ... ?> произойдет только один раз.

Когда дело доходит до клиентской стороны, тогда ng-repeat будет перебирать количество раз для ссылок.

поэтому, вы НЕ МОЖЕТЕ подтвердить свой ввод в php X раз, используя ng-repeat.

Пожалуйста, попробуйте другой подход.

---- EDIT ------

Я предлагаю другой подход, хотя вы можете не согласиться.

1. сформировать клиентскую форму без проверки на стороне сервера.

2. визуализировать клиентскую сторону, поскольку она генерируется серверным кодом.

3. Угловой JS предоставляет множество инструментов проверки на стороне клиента, используйте как можно больше, чтобы при его отправке на сервер он был как можно более действенным.

4. Однако плохой пользователь может отправить форму без использования вашего кода на стороне клиента, поэтому при ее отправке проверка правильности ввода данных на стороне сервера при условии, что вход не всегда правильный. Вам нужна отдельная логика проверки без использования вида (html). Вы можете использовать эту часть как вызов ajax.

5. При возникновении ошибки отправьте сообщение с защитой с сообщением об ошибке, чтобы клиентская панель отображалась правильно. «Неизвестная ошибка при вызове API сторонних организаций»

Answer 2

$ index - специальная угловая переменная, счетчик циклов. Я полагаю, что использование его в функции отслеживания не является лучшей идеей ...

truck by - это способ управления индексом/последовательностью цикла. Например. вы могли бы написать, как

л

<div ng-repeat="link in links track by link.id"> 

В этом случае счетчик цикла будет поле идентификатора из вас связывает

, если вы хотите получить только счетчик цикла (индекс цикла) просто использовать $index в коде. Например .:

<div ng-repeat="item in ['one', 'two', 'tree', 'four']"> 
    <div>Index of {{ item }} is <b>{{ $index }}</b> 
</div> 

---

UPD

О мой ... Я вижу свою цель. Вы хотите иметь valiadtion на КАЖДОЙ итерации в цикле ссылок ... Итак, @allenhwkim дает описательный ответ.

Также вы можете вызвать функцию js на каждой итерации, которая будет отправлять AJAX на сервер только для проверки формы, и вы могли бы показать ошибки, данные из ответа ajax. Так сказал @allenhwkim.

Answer 3

Мне удалось использовать $ index var для обозначения полей с регулярными соглашениями об именах торта. Я использовал угловую директиву и атрибут «динамическое имя». Однако, я не уверен, что это хорошо играет с входной помощник CakePHP магии формы, так что вы, возможно, придется использовать обычный старый HTML синтаксис:

<form name="orderForm"> 
    <div class="product" ng-repeat="product in formData.data.Product"> 
     <div class="row"> 
      <div class="input text" ng-class="{ 'error': orderForm[ 'data[Product][' + $index + '][number]' ].$invalid }"> 
       <input type="text" placeholder="Product number" class="form-control" ng-model="product.number" dynamic-name="'data[Product][' + $index + '][number]'"> 
       <div class="error-message" ng-show="orderForm[ 'data[Product][' + $index + '][number]' ].$invalid">{{ errorMessage('data[Product][' + $index + '][number]') }}</div> 
      </div> 
     </div> 
    </div> 
</form> 

Ниже приведена директива. Он в основном предоставляет атрибут «dynamic-name», который вы устанавливаете в своем поле.

productsApp.directive("dynamicName", function($compile){ 
    return { 
     restrict:"A", 
     terminal:true, 
     priority:1000, 
     link:function(scope,element,attrs){ 
      element.attr('name', scope.$eval(attrs.dynamicName)); 
      element.removeAttr("dynamic-name"); 
      $compile(element)(scope); 
     } 
    }; 
}); 

В вашем угловом контроллере, вы можете получить доступ поля для настройки $ правильной и $ ошибки с этим синтаксисом:

$scope.orderForm[ field ].$error // Field : 'data[Product][0][number]' (string) 

Answer 4

Я написал AngularJS директивы для добавления сообщений проверки в ответ по умолчанию из CakePHP 3 (RC) REST API.

Предположения вы получите ответ JSON, содержащий {данных: {ошибку: х}} (по умолчанию CakePHP ответ):

https://gist.github.com/stefanvangastel/3fd27e9c02fe999dde53

на основе выбора класса Bootstrap питания шаблона.