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;
});

説明や助けをいただければ幸いです。

4

4 に答える 4

1

ng-iforディレクティブを使用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 に設定するだけで、フォームが非表示になり、2 番目のステップが表示されます...

this.addName = function() {

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

    this.newName.name = null;

    // hide form
    this.hideForm = true;

};
于 2015-10-29T18:31:47.073 に答える
0

ng-ifタグでorng-showまたはng-hideを使用して<form>、コントローラーから値を制御できます。

于 2015-10-29T18:30:20.623 に答える
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;
});
于 2015-10-29T18:31:30.287 に答える
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;

});

于 2015-10-29T18:25:28.957 に答える