AngularJS ng-repeat e validazione modulo

Question

Ho riscontrato un problema con la convalida del modulo in AngularJS e l'utilizzo di una ripetizione ng degli elementi all'interno del modulo.

HTML:

<div ng-app> 
    <div ng-controller="EditController"> 
     <form name="form" novalidate>Name: 
      <br/> 
      <input type="text" ng-model="model.name" required="" /> 
      <hr />Products: 
      <br/> 
      <div ng-repeat="product in model.products"> 
       <div> 
        <input type="text" ng-model="product.name" required="" /> 
        <input type="text" ng-model="product.price" required="" /> <a href="javascript:void(0)" ng-click="remove($index)">Remove</a> 

       </div> 
      </div> 
      <hr /> 
      <button ng-disabled="form.$invalid || !form.$dirty" ng-click="save()">save</button> 
      <div ng-show="form.$invalid && !form.$pristine">There are errors.</div> 
      <div ng-show="!form.$dirty && form.$pristine">No changed detected to be saved.</div> 
      <div> 
       <p>Dirty? {{form.$dirty}}</p> 
       <p>Invalid? {{form.$invalid}}</p> 
       <p>Pristine? {{form.$pristine}}</p> 
      </div> 
     </form> 
    </div> 
</div> 

JS:

function EditController($scope) { 
    $scope.model = { 
     name: "Phil", 
     products: [{ 
      name: "Foo", 
      price: 12.99 
     }, { 
      name: "Bar", 
      price: 15.99 
     }, { 
      name: "FooBar", 
      price: 24.99 
     }] 
    }; 

    $scope.remove = function(index){ 
     $scope.model.products.splice(index, 1); 
    }; 

    $scope.save = function() { 
     console.log("saved"); 
    }; 
} 

Fiddle:

http://jsfiddle.net/66V6m/2/

Replica:

Rimuovere 1 articolo cliccando rem ove, la forma non si sporca, quindi il pulsante non abilita.

Se si modifica il campo del nome, il modulo diventa sporco.

Qualche idea su come rimuovere un oggetto dall'array rende il modulo sporco?

Answer 1

Angolare fornisce una funzione $setDirty() per lo scopo che si sta tentando di realizzare qui. Basta aggiungere che nel tuo attributo ng-click in questo modo

<input type="text" ng-model="product.price" required="" /> 
<a href="javascript:void(0)" ng-click="remove($index); form.$setDirty(true);">Remove</a> 

ho biforcato vostro violino e farlo lavorare here

Answer 2

Ecco un modo.

$scope.remove = function (index) { 
    $scope.model.products.splice(index, 1); 
    $scope.form.$dirty = true; 
};