令牌“。” 在angularJS表达式的列中不是有效的标识符

Question

嗨，我正在AngularJS中开发Web应用程序。 我正在使用angularjs进行必填字段验证。 所需的验证工作正常。 当我打开控制台时，我可以看到以下错误。

错误：[$ parse：syntax]语法错误：令牌'。 在表达式[{''has-error'：（（（formDoc。$ submitted && formDoc .. $ invalid）||（（formDoc .. $ invalid && formDoc .. $ dirty））}）的第49列处不是有效的标识符。从[。$ invalid）||开始 （formDoc .. $ invalid && formDoc .. $ dirty））}]。

以下是我的验证角度代码。

<div class="upload-button" ng-repeat="fileInput in fileInputs" ng-class="{ 'has-error' : ((formDoc.$submitted && formDoc.{{fileInput.Fileid}}.$invalid )|| (formDoc.{{fileInput.Fileid}}.$invalid && formDoc.{{fileInput.Fileid}}.$dirty))}">

//Some other code
</div> 

我很难找出上面的代码中缺少的内容。 有人可以帮助我找出以上代码中缺少的内容吗？ 任何帮助，将不胜感激。 谢谢。

Answer 1

尝试这种方式：

<div class="upload-button"
  ng-repeat="fileInput in fileInputs" 
  ng-class="{ 'has-error':
    ((formDoc.$submitted && formDoc[fileInput].Fileid.$invalid) ||
     (formDoc[fileInput].Fileid.$invalid && formDoc[fileInput].Fileid.$dirty))
  }">

  //Some other code
</div>

编辑：虽然，我应该补充一点，但是您应该将此逻辑移到控制器中，而不是通过这种验证使模板膨胀。 也就是说，

<div class="upload-button"
  ng-repeat="fileInput in fileInputs"
  ng-class="{'has-error': vm.hasFileInputError(fileInput) }">
</div>

然后在您的控制器中：

function hasFileInputError(fileInput) {
  return this.formDoc.$submitted && this.formDoc[fileInput].Fileid.$invalid ||
    formDoc[fileInput].Fileid.$invalid && formDoc[fileInput].Fileid.$dirty);
}