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-iforng-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;

};
于 2015-10-29T18:31:47.073 回答
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 回答
0

您可以在您的标签上使用or并ng-if控制来自控制器的值。ng-showng-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 回答