基于条件应用 ng-show 和 ng-hide 动态创建的元素 angularjs ng-repeat答案

【问题标题】：apply ng-show and ng-hide on condition based for dynimcally created elements angular js ng-repeat基于条件应用 ng-show 和 ng-hide 动态创建的元素 angularjs ng-repeat
【发布时间】：2015-12-06 11:03:06
【问题描述】：

为我的表单中的某些文件申请所需的文件，但我的表单是使用自定义指令创建的，因此 Html 是动态创建的。我正在使用 ng-repeat，当用户输入提交按钮时，我需要显示一些字段是必需的，但它显示所有字段都是必需的。

 <div ng-repeat="item in items">
        <input type=[item.name]>
 </div>


<p ng-show="ErrorMsg">Error Message </p>

当我检查控制器逻辑时

Controller.js

$scope.ErrorMsg = false;

if(item.value == null){
   $scope.ErrorMsg = true;

}

但它显示了错误消息的所有字段。请建议我如何处理

提前致谢！

【问题讨论】：

请编辑您的问题以包含更多代码。您的标题是关于条件 css 的（请参阅 ng-class），但您的问题似乎是关于错误消息的？？

标签： javascript angularjs angularjs-ng-repeat

【解决方案1】：

我创建了一个关于angularjs动态表单验证的简单plunkr，请参考：http://plnkr.co/edit/7OJHKsJPoHNqeeStBtnh.

// Code goes here
var myApp = angular.module('myApp',[]);

myApp.controller('DemoController', ['$scope', function($scope) {
  function setTouched(form) {
    angular.forEach(form, function (value, key) {
      if (!/^\$/.test(key)) {
        form[key].$setTouched();
      }
    });
  }
    
  var config = [];
  for (var i = 0; i < 10; i++) {
    var item = {};
    item.name = 'input' + i;
    item.required = (i%2 === 0) ? true : false;
    config[i] = item;
  }
  $scope.config = config;
  $scope.save = function() {
    if ($scope.testForm.$invalid) {
      setTouched($scope.testForm);
    }
  }
}]);

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angularjs@1.3.6" data-semver="1.3.6" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.6/angular.min.js"></script>
    <script data-require="ng-messages@*" data-semver="1.3.16" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-messages.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="DemoController">
    <form name="testForm" ng-submit="save()" novalidate>
      <div ng-repeat="item in config">
        <input type="text" name="{{item.name}}" ng-model="item.value"
        ng-required="item.required" />
      <div ng-messages="testForm[item.name].$error"
      ng-if="testForm[item.name].$invalid && testForm[item.name].$touched">
      <div ng-message="required">this is required</div>
      </div>
      </div>
      <button type="submit">save</button>
    </form>
  </body>

</html>

希望这可以帮助:)

【讨论】：