Как скрыть форму после ng-submit в Angular JS

Question

Как скрыть форму после ng-submit в Angular JS

0

У меня есть форма в моем индексе, который вводит имя. После представления имени с помощью ng-submit, я хочу скрыть форму, а затем показать другой div, который в настоящее время не скрыт ниже. Я попытался добавить кнопку в форму, чтобы установить ng-click и показать по щелчку, но не может заставить его работать (я вынул кнопку) и просто введите вход.

HTML

<form name="add-name" id="add-name" ng-submit="mainCtrl.addName()">
    <input type="text" class="enter-name" placeholder="Enter your name here..." ng-model="mainCtrl.newName.name">
</form>

<!--- this part should be hidden, but should show when form is submitted --->
<div class="steptwo">
    <h4 class="steptwo-text">{{ mainCtrl.newName.name }}</h4>
</div>

контроллер

app.controller('mainController', function($scope) {

    this.newName = { name: '' };

    this.names = this.names || [
        { name: ' ' },
    ];

    this.addName = function() {

        this.names.push({
            name: this.newName.name
        });

        this.newName.name = null;
    };
    return this;
});

Любое объяснение или помощь будут очень признательны.

luke 29 окт. 2015, в 19:40

Источник

Теги:

javascript

angularjs

ng-show

forms

ng-hide

4 ответа

0

Вы можете использовать ng-if или ng-show или ng-hide в тэге <form> и управлять значением из контроллера.

swapnesh 29 окт. 2015, в 17:04

0

HTML:

 <form name="add-name" id="add-name" ng-submit="mainCtrl.addName()" ng-if="hide">
    <input type="text" class="enter-name" placeholder="Enter your name here..." ng-model="mainCtrl.newName.name">
</form>

<!--- this part should be hidden, but should show when form is submitted --->
<div class="steptwo" ng-if="!hide">
    <h4 class="steptwo-text">{{ mainCtrl.newName.name }}</h4>
</div>

контроллер:

app.controller('mainController', function($scope) {
$scope.hide = false;
this.newName = { name: '' };

this.names = this.names || [
    { name: ' ' },
];

this.addName = function() {

    this.names.push({
        name: this.newName.name
    });

    this.newName.name = null;
};
$scope.hide = true;
return this;

});

Miha2255 29 окт. 2015, в 16:59

0

Я думаю, что $ scope.hide = true должен быть внутри функции addName, потому что он хочет скрыть Div после отправки его. Также отметьте различия в использовании ng-if и ng-show / hide
Gonzalo.- 29 окт. 2015, в 18:29
0

Верный. Мне пришлось поместить $ scope.hide = true в функцию addName, чтобы div скрывал ng-submit
luke 29 окт. 2015, в 21:23

0

HTML файл:

<form name="add-name" id="add-name" ng-submit="mainCtrl.addName()" ng-hide="hide">
    <input type="text" class="enter-name" placeholder="Enter your name here..." ng-model="mainCtrl.newName.name">
    <input type="button" ng-click="{{hide=true}}">
</form>

<!--- this part should be hidden, but should show when form is submitted --->
<div class="steptwo" ng-show="hide">
    <h4 class="steptwo-text">{{ mainCtrl.newName.name }}</h4>
</div>

Файл JavaScript:

app.controller('mainController', function($scope) {
    $scope.hide = false;
    this.newName = { name: '' };

    this.names = this.names || [
        { name: ' ' },
    ];

    this.addName = function() {

        this.names.push({
            name: this.newName.name
        });

        this.newName.name = null;
    };
    return this;
});

Harshal Carpenter 29 окт. 2015, в 16:21

Ещё вопросы

Я думаю, что $ scope.hide = true должен быть внутри функции addName, потому что он хочет скрыть Div после отправки его. Также отметьте различия в использовании ng-if и ng-show / hide
Верный. Мне пришлось поместить $ scope.hide = true в функцию addName, чтобы div скрывал ng-submit

Poyraz Yilmaz · Accepted Answer · 2015-10-29T16-36-00.000Z

Вы можете использовать директиву ng-if или ng-show/hide для отображения и скрытия div в зависимости от выражения...

поэтому сначала добавьте эту директиву в часть html, которую вы хотите показать и скрыть, и дать им такое же выражение...

<form name="add-name" id="add-name" ng-submit="mainCtrl.addName()" ng-hide="mainCtrl.hideForm">
    <input type="text" class="enter-name" placeholder="Enter your name here..." ng-model="mainCtrl.newName.name">
</form>

<!--- this part should be hidden, but should show when form is submitted --->
<div class="steptwo" ng-show="mainCtrl.hideForm">
    <h4 class="steptwo-text">{{ mainCtrl.newName.name }}</h4>
</div>

то в вашем контроллере просто установите hideForm переменной true, поэтому форма будет скрыта, а второй шаг будет показан...

this.addName = function() {

    this.names.push({
        name: this.newName.name
    });

    this.newName.name = null;

    // hide form
    this.hideForm = true;

};

Здорово, спасибо за объяснение тоже. Возникают проблемы с отображением ввода формы после появления steptwo div. У меня есть вывод, отображающийся в другом представлении, но я не могу показать его в том же представлении .... есть идеи? еще раз спасибо!
Понял. Еще раз спасибо за решение.