Question

我有以下HTML代码：

<div class="row">
    <div class="col-md" ng-repeat="song in songs">
        <div class="title"><div class="add">+</div></div>
        <div class="item"></div>
    </div>
</div>

当我点击<div class="add">+</div>时，我需要在此处显示表单：

<div class="row">
        // Show form here with submit button
        <div class="col-md" ng-repeat="song in songs">...

当我提交表单时，我需要在打开表单的列中添加新项<div class="item"></div>。

如何在AngularJS中执行此操作？我可以使用dinamicly插入表单，还是必须在ng-repeat中一次设置表单？

Answer 1

＆＃13;

angular.module('app',[])
.controller('ctrl',function($scope){
    $scope.formView = false;
    $scope.itemView = false;
    $scope.plusShow = true;
  
  $scope.songs =['sample']
  
  $scope.showFrom = function(){
    $scope.formView = true;
    $scope.plusShow = false;
  };
  
  $scope.submit = function(){ 
   $scope.formView = false;
    $scope.itemView = true;    
    $scope.plusShow = false;
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="row" ng-app="app" ng-controller="ctrl">
    <form  ng-if="formView">
      <!-- from content -->
      <input ng-click="submit()" type="submit" id="submit" value="Submit" />
      </form>
  
  
    <div class="item" ng-if="itemView">items</div>
   

    <div class="col-md" ng-repeat="song in songs">
        <div class="title">
          <div class="add"  ng-click="showFrom()" ng-if="plusShow">+</div>
        </div>      
    </div>

</div>

＆＃13;

每个块中的显示形式是由ng-repeat创建的？

1 个答案: