Javascript CakePHP和AngularJS{{$index}的评价

我正在使用CakePHP和AngularJS，我需要验证我的多模型表单

例如，这是创建元素的方式：

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

验证是可以的。 以下各项的输出：

var_dump$this->Staticpage->validationErrors

是

问题是：如果我使用{{$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内部。

问题是

您希望使用客户端代码显示服务器端错误验证

$index是客户端代码，它是特定于AngularJS的javascript代码

您需要服务器端代码，即php，来理解$index是什么

服务器端，cakePHP或任何php，永远不知道$index是什么意思，也永远不知道$index将是1,2,3,4,5或其他什么

在php端，中的代码只发生一次

对于客户端，ng repeat将按链接的次数进行迭代

因此，您无法使用ng repeat多次在PHPX中验证输入

请尝试不同的方法

--编辑---

我建议采用不同的方法，尽管你可能不同意

生成客户端表单，无需任何服务器端验证

呈现由服务器端代码生成的客户端

AngularJS在客户端提供了大量的验证工具，尽可能多地使用，以便在提交到服务器时尽可能有效

但是，坏用户可以在不使用客户端代码的情况下提交表单，因此在提交表单时，请在服务器端验证用户输入，前提是输入并不总是正确的。您需要一个单独的验证逻辑，而不需要使用viewhtml。您可以将此部分用作ajax调用

若有错误，将带有错误的消息发送回用户，以便客户端可以正确显示错误。i、 e.第三方API调用存在未知错误

问题是,

您希望使用客户端代码显示服务器端错误验证

$index是客户端代码，它是特定于AngularJS的javascript代码

您需要服务器端代码，即php，来理解$index是什么

服务器端，cakePHP或任何php，永远不知道$index是什么意思，也永远不知道$index将是1,2,3,4,5或其他什么

在php端，中的代码只发生一次

对于客户端，ng repeat将按链接的次数进行迭代

因此，您无法使用ng repeat多次在PHPX中验证输入

请尝试不同的方法

--编辑---

我建议采用不同的方法，尽管你可能不同意

生成客户端表单，无需任何服务器端验证

呈现由服务器端代码生成的客户端

AngularJS在客户端提供了大量的验证工具，尽可能多地使用，以便在提交到服务器时尽可能有效

但是，坏用户可以在不使用客户端代码的情况下提交表单，因此在提交表单时，请在服务器端验证用户输入，前提是输入并不总是正确的。您需要一个单独的验证逻辑，而不需要使用viewhtml。您可以将此部分用作ajax调用

若有错误，将带有错误的消息发送回用户，以便客户端可以正确显示错误。i、 e.第三方API调用存在未知错误

---

$index-是特殊的角度变量，循环计数器。我想在跟踪功能中使用它不是最好的主意

卡车是管理循环索引/顺序的方式。你可以这样写smth

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

UPD

哦，我的。。。 我看到你的目标了。您希望在链接循环中的每个提交上都有有效性。。。 因此@allenhwkim提供了一个描述性的答案

---

此外，您还可以在每次提交时调用js函数，将AJAX发送到服务器只是为了进行表单验证，然后显示AJAX响应中给出的错误。这样@allenhwkim也提到了。

$index-是特殊的角度变量，循环计数器。我想在跟踪功能中使用它不是最好的主意

卡车是管理循环索引/顺序的方式。你可以这样写smth

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

UPD

哦，我的。。。 我看到你的目标了。您希望在链接循环中的每个提交上都有有效性。。。 因此@allenhwkim提供了一个描述性的答案

---

此外，您还可以在每次提交时调用js函数，将AJAX发送到服务器只是为了进行表单验证，然后显示AJAX响应中给出的错误。这样@allenhwkim也提到了。

我设法使用$index var来命名具有常规命名约定的字段。我使用了Angular指令和“dynamic name”属性 . 但是，我不确定它是否能很好地与CakePHP magic Form input helper配合使用，因此您可能必须使用简单的旧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>

在角度控制器中，可以使用以下语法访问设置$valid和$error的字段：

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

---

我设法使用$index var来命名具有常规命名约定的字段。我使用了Angular指令和“dynamic name”属性。但是，我不确定它是否能很好地与CakePHP magic Form input helper配合使用，因此您可能必须使用简单的旧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>

在角度控制器中，可以使用以下语法访问设置$valid和$error的字段：

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

---

我编写了一个AngularJS指令，将验证消息添加到CakePHP 3 RC REST API的默认响应中

假设您得到一个JSON响应，其中包含{data:{errors:x}}默认CakePHP响应：

---

基于一个引导模板的类选择

我编写了一个AngularJS指令，将验证消息添加到CakePHP 3 RC REST API的默认响应中

假设您得到一个JSON响应，其中包含{data:{errors:x}}默认CakePHP响应：

---

基于一个引导模板的类选择

我相信$index在像ng repeat这样的东西中是内部使用的，而您以编程方式设置它们是行不通的。另外，您的问题有点模糊，似乎是PHP问题，而不是angularjs问题。@EliteOctagon我刚刚添加了更多的视图片段，所以可以看到代码在ng repeat中。看起来主要的问题是Cake试图在AngularJs计算{{$index}之前将错误消息放在元素上。我不知道语法，但可能的概念是在视图中对validationErrors进行json编码，并将其传递给AngularJs可访问的某个JS变量。然后，在repeat循环中，您可以检查该索引是否存在验证错误，并显示HTML error div，或者不只是从cake中重用HTML。希望它能帮上忙，或者有人精通AngularJS能给你更好的指导；我相信$index在像ng repeat这样的东西中是内部使用的，而您以编程方式设置它们是行不通的。另外，您的问题有点模糊，似乎是PHP问题，而不是angularjs问题。@EliteOctagon我刚刚添加了更多的视图片段，所以可以看到代码在ng repeat中。看起来主要的问题是Cake试图在AngularJs计算{{$index}之前将错误消息放在元素上。我不知道语法，但可能的概念是在视图中对validationErrors进行json编码，并将其传递给AngularJs可访问的某个JS变量。然后，在repeat循环中，您可以检查该索引是否存在验证错误，并显示HTML error div，或者不只是从cake中重用HTML。希望它能帮上忙，或者有人精通AngularJS能给你更好的指导；op不能使用ajax向服务器发送{{$index}}值吗？谢谢你的回答。我确实知道。似乎没有一种方法可以这样使用AngularJS和CakePHP。op不能使用ajax向服务器发送{{$index}}值吗？谢谢你的回答。我确实知道。似乎没有一种方法可以这样使用AngularJS和CakePHP。