Question

我想在创建记录时隐藏“添加新按钮”。并且只有当我完成创建记录时才显示它。

与 “提交一个按钮” 相同，我想隐藏它（提交一个按钮）并显示 “添加新按钮“ ，因为我完成了提交。怎么做？

下面是我的代码，这是我的 plunkr ：

的index.html

<!DOCTYPE html>
<html ng-app="angularjs-starter">

  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script>
      document.write('<base href="' + document.location + '" />');
    </script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <a ng-show="hideAddButton" ng-hide="hideAddButton" ng-click="addNew();hideAddButton = !hideAddButton">+ add new</a>
    <form name="mainForm" ng-submit="submitAll()">
      <ul>
        <li ng-repeat="item in items" ng-form="subForm">          
          <input type="text" required name="name" ng-model="item.name"/>
          <span ng-show="subForm.name.$error.required">required</span>
          <button type="button" ng-disabled="subForm.$invalid" ng-click="submitOne(item);hideAddButton = !hideAddButton">Submit One</button>
        </li>
      </ul>
      <button type="submit" ng-disabled="mainForm.$invalid">Submit All</button>
    </form>
    <hr/>
    <div ng-show="lastSubmit">Last Submit:</div>
    <pre>{{lastSubmit | json}}</pre>
  </body>

</html>

app.js

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {
  $scope.items = [];
  $scope.addNew = function (){
    $scope.items.push({ name: '' });
  };

  $scope.submitOne = function (item){
    $scope.lastSubmit = angular.copy(item);
  };

  $scope.submitAll = function() {
    $scope.lastSubmit = angular.copy($scope.items);
  }
});

Answer 1

以下是我的解决方案：http://plnkr.co/edit/8kOmWQ96UFkNOxZqcFMS?p=preview

app.controller('MainCtrl', function($scope) {
  $scope.items = [];
  $scope.isSubmitting = false;
  $scope.addNew = function (){
    $scope.isSubmitting = true;
   // Here I added a state for each item. 
    $scope.items.push({ name: '', showButton:true }); 
  };

  $scope.submitOne = function (item){
    item.showButton = false; 
    $scope.isSubmitting = false;
    $scope.lastSubmit = angular.copy(item);
  };

  $scope.submitAll = function() {
    $scope.items.forEach(function(i){i.showButton=false;})
    $scope.isSubmitting = false;
    $scope.lastSubmit = angular.copy($scope.items);
  }
});

HTML

<body ng-controller="MainCtrl">
<a ng-hide="isSubmitting" ng-click="addNew();">+ add new</a>
<form name="mainForm" ng-submit="submitAll()">
  <ul>
    <li ng-repeat="item in items" ng-form="subForm">          
      <input type="text" required name="name" ng-model="item.name"/>
      <span ng-show="subForm.name.$error.required">required</span>
      <button ng-show="item.showButton" type="button" ng-disabled="subForm.$invalid" ng-click="submitOne(item);">Submit One</button>
    </li>
  </ul>
  <button type="submit" ng-disabled="mainForm.$invalid">Submit All</button>
</form>
<hr/>
<div ng-show="lastSubmit">Last Submit:</div>
<pre>{{lastSubmit | json}}</pre>
</body>

我认为这就是你要求的，但我不认为＆＃34;提交全部＆＃34;按钮在这种情况下很有意义，除非您在提交之前允许添加更多项目（但您明确表示您希望＆＃34;添加新的＆＃34; - 按钮隐藏）。

另外我不确定你是否真的想为每件商品存储一个状态，但显示/隐藏所有按钮对我来说都没有意义......

Answer 2

您应该使用ng-show或ng-hide指令。

使用ng-show： <button ng-show="hideAddButton === false">

使用ng-hide： <button ng-hide="hideAddButton === true">

保存/创建后，angularjs隐藏/显示添加按钮

2 个答案: