Если я вас правильно понял, вам не нужно изменять пользовательский интерфейс (например, снова отображать form или что-то в этом роде), а сбрасывать форму после каждого «следующего» щелчка.
Если да, мой Предложение состоит в том, чтобы провести ряд наблюдений. Нажатие на «Далее» поместит sh значение ввода в этот массив и очистит ввод. Нажатие на fini sh сделает что-то (в текущий момент) с массивом.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form>
Vendor Name: <input type="text"> <br> <br>
Vendor Details: <textarea> </textarea> <br> <br>
<button ng-click="myFunc()">Click to enter Observations</button>
</form>
<div ng-show="showMe">
<br> <br> <form>
Detailed Observation <input type="text" ng-model="observation">
<button type="submit" ng-click="nextObservation()"> Next Observation </button>
<button type="submit" ng-click="finish()"> Finish </button>
</form>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.observations = [];
$scope.showMe = false;
$scope.myFunc = function() {
$scope.showMe = true;
}
$scope.nextObservation = function() {
if ($scope.observation) {
$scope.observations.push($scope.observation);
$scope.observation = '';
}
}
$scope.finish = function() {
$scope.nextObservation();
console.log($scope.observations);
}
});
</script>
</body>
</html>
Обновить
Чтобы сохранить предыдущие значения, но добавить новое при нажатии на «Далее», вы можете использовать этот массив с ng-repeat для рендеринга пользовательского интерфейса на основе этого массива. Обратите внимание, что на этот раз вам понадобится track by $index, чтобы избежать дублирования сущностей (для получения дополнительной информации: { ссылка })
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form>
Vendor Name: <input type="text"> <br> <br> Vendor Details: <textarea> </textarea> <br> <br>
<button ng-click="myFunc()">Click to enter Observations</button>
</form>
<div ng-repeat="observation in observations track by $index">
<br> <br>
<form>
Detailed Observation <input type="text" ng-model="observations[$index]">
<button type="submit" ng-click="nextObservation($index)" ng-if="$last"> Next Observation </button>
<button type="submit" ng-click="finish()" ng-if="$last"> Finish </button>
</form>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.observations = [];
$scope.myFunc = function() {
$scope.observations.push('');
}
$scope.nextObservation = function($index) {
$scope.observations[$index]
if ($scope.observations[$index]) {
$scope.observations.push('');
}
}
$scope.finish = function() {
console.log($scope.observations);
}
});
</script>
</body>
</html>