ngif中的动态变量不起作用答案

【问题标题】：dynamic variable inside ngif not workingngif中的动态变量不起作用
【发布时间】：2015-10-06 17:15:54
【问题描述】：

我有一段这样的代码

ng-show="!edit{{id}} && imageUrl"

但这似乎不起作用。在哪里

ng-show="!edit1 && imageUrl"

有效。语法有问题吗？？

实际代码段

template: '<div id="dropTarget{{imageid}}" ng-show="edit{{imageid}}">'+
            '<img id="imageView{{imageid}}" ng-src="{{imageUrl}}" />'+
        '</div>'+
        '<img id="imageView{{imageid}}" ng-if="!edit{{imageid}} && imageUrl" ng-src="{{imageUrl}}" alt="Coach"/>'+
        '<div class="my-new-photo" ng-if="!edit{{imageid}} && !imageUrl">+</div>'+
        '<span class="edit-info" ng-click="showUploadImageOptions(imageid)" ng-show="!edit{{imageid}} && imageUrl">EDIT</span>'+
        '<span class="edit-info" ng-click="showUploadImageOptions(imageid)" ng-show="!edit{{imageid}} && !imageUrl">NEW</span>'+
            '<div ng-show="edit1" class="buttons-section">'+
                '<form enctype="multipart/form-data" method="post">'+
                    '<input type="file" name="filesToUpload{{imageid}}" id="filesToUpload{{imageid}}" style="display:none;"/>'+
                    '<span class="upl-sav-can" ng-click="uploadImage(imageid)">Browse</span>'+
                    '<span  class="upl-sav-can" ng-click="revertImage(imageid)">Cancel</span>'+
                '</form>'+
            '</div>',

【问题讨论】：

将所有{{ id }}更改为+ 'id'

标签： angularjs angular-ng-if

【解决方案1】：

您尝试做的事情是不可能的。正如@dfsq 所说，ngShow 需要 Angular 表达式。您不能通过在 Angular 表达式中插入其名称来访问范围变量。

您最好的选择是将edit 设为数组或对象，然后通过索引或键访问其内容。

ng-show="!edit[id] && imageUrl"

【讨论】：

【解决方案2】：

ngShow 期望 Angular expression 是一种正则 javascript 表达式（有某些限制）。因此，将您在这些情况下编写的内容视为正常的 javascript 表达式。

现在问问自己：!edit{{id}} && imageUrl 是有效的 javascript 表达式（代码）吗？当然不。当提供的表达式无法作为有效的 JavaScript 代码进行解析和评估（$parse 服务执行此操作）时，Angular 会引发错误。

然而

ng-show="!edit[id] && imageUrl"

将是使用括号表示法访问对象/数组的变量属性的有效表达式。这是您在这种情况下需要使用的。

【讨论】：

但它不是一个数组。在 JS 中，如果我说它像 'edit'+id
那么它将是ng-show="!(edit + id) && imageUrl"。
@dfsq 我想在表单验证的情况下使用此条件：- ng-if="{{formName}}.{{inputFieldName + $index}}.$dirty" 在这种情况下，我应该如何在ng-if="" 中使用动态 name

【解决方案3】：

为什么不做正确的事情并为该返回值调用一个方法？

部分代码：

<span class="edit-info" ng-click="showUploadImageOptions(imageid)" ng-show="returnEditId(imageid) && imageUrl">EDIT</span>

JS：

    $scope.returnEditId = function(id){
        if(!$scope.edit[id])
         return false;
        else
         return true;
    }

【讨论】：