применить ng-show и скрыть по условию для динамально созданных элементов angular js repeat

Question

применить ng-show и скрыть по условию для динамально созданных элементов angular js repeat

0

примените обязательную заявку для некоторых заявок в моей форме, но моя форма создается с использованием специальной директивы, поэтому 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;

}

Но он показывает все поля для сообщения об ошибке. Пожалуйста, предложите мне, как подойти

Заранее спасибо!

siva prasad 06 дек. 2015, в 02:38

Источник

2

Пожалуйста, измените ваш вопрос, чтобы включить больше вашего кода. Ваш заголовок посвящен условному CSS (см. ng-class ), но ваш вопрос, похоже, касается сообщения об ошибке ??
Tristan 06 дек. 2015, в 01:23

Теги:

javascript

angularjs

angularjs-ng-repeat

1 ответ

Ещё вопросы

Пожалуйста, измените ваш вопрос, чтобы включить больше вашего кода. Ваш заголовок посвящен условному CSS (см. ng-class ), но ваш вопрос, похоже, касается сообщения об ошибке ??

yukuan · Answer 1 · 2015-12-06T00-47-00.000Z

Я создаю простой plunkr о проверке динамической формы angularjs, см. Здесь: 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="[email protected]" 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>

Надеюсь, это поможет :)