通过单击按钮编辑项目。 Angular.js

问题描述：

我目前有一个指令来动态编辑一个字段。我在手风琴的头文件中编辑了一个字段，并在手风琴的内容中添加了另一个字段。如果我点击编辑按钮，相应行中的字段可以编辑，并且工作正常。我的问题是当我保存或取消它时（当我点击保存或取消按钮时）立即消失了标题和标题内容的文本字段。我只需要文本字段就会消失，因为我要保存或取消该项目。当你点击编辑按钮时，这两个文本字段应该出现在标题和内容中（这是有效的）。当点击保存或取消时，所选元素中的文本字段应该消失/出现。通过单击按钮编辑项目。 Angular.js

<div ng-controller="AccordionDemoCtrl"> 

    <uib-accordion close-others="true"> 
    <div ng-repeat="faq in faqs"> 
     <div class="col-sm-11" > 
      <div uib-accordion-group class="panel-default" is-open="faq.open"> 
       <uib-accordion-heading > 
        <span ng-click="ignoreClick($event);" ><a href='' click-to-edit edit-state='faq.editState' ng-model='faq.pregunta' typeinput='textarea' >{{faq.pregunta}}</a></span> <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': faq.open, 'glyphicon-chevron-right': !faq.open}"></i> 
       </uib-accordion-heading> 
       <span click-to-edit edit-state='faq.editState' ng-model="faq.respuesta" >{{faq.respuesta}}</span> 

      </div> 
     </div> 
     <div class="col-sm-1" > 
      <button type="button" ng-click="toggleEditState($index)" class="btn btn-default"> 
      <span class="glyphicon glyphicon glyphicon-edit"></span> 
      </button> 
     </div> 
     </div> 
    </uib-accordion> 
    </div>

https://plnkr.co/edit/S4OllJV64EYFNo6WIjVH?p=preview

您好！你不能在保存/取消时切换当前（$ index）元素上的“faq.open”吗？ – Julo0sS

答

我相信你需要在控制器级管理两个独立的布尔这样一个指令不会覆盖其他的状态，那么你必须与你的开放式设置这两个布尔按钮。我保持主状态，所以你的字形按钮将打开或关闭两者，保存/取消应彼此独立运作。

$scope.editState = false; 
$scope.editHeader = false; 
$scope.editBody = false; 

$scope.toggleEditState = function(index, val) { 
    debugger; 
    $scope.editState = !$scope.editState; 
    $scope.faqs[index].editHeader = $scope.editState; 
    $scope.faqs[index].editBody = $scope.editState; 
} 


    <div ng-repeat="faq in faqs"> 
     <div class="col-sm-11" > 
      <div uib-accordion-group class="panel-default" is-open="faq.open"> 
       <uib-accordion-heading > 
        <span ng-click="ignoreClick($event);" ><a href='' click-to-edit edit-state='faq.editHeader' ng-model='faq.pregunta' typeinput='textarea' >{{faq.pregunta}}</a></span> <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': faq.open, 'glyphicon-chevron-right': !faq.open}"></i> 
       </uib-accordion-heading> 
       <span click-to-edit edit-state='faq.editBody' ng-model="faq.respuesta" >{{faq.respuesta}}</span> 

      </div> 
     </div> 
     <div class="col-sm-1" > 
      <button type="button" ng-click="toggleEditState($index)" class="btn btn-default"> 
      <span class="glyphicon glyphicon glyphicon-edit"></span> 
      </button> 
     </div>

https://plnkr.co/edit/91cGWoTKyJsZQKxYapiT?p=preview

你也可以用，如果你希望自己的输入字段来打开和关闭两种指令传达主人的地位。

答

使用单向（单向）结合为editState

scope: { 
     model: '=ngModel', 
     editState: '<' 
    },

https://plnkr.co/edit/dNehOxAIRHsRqgK9wXJx?p=preview

太棒了！我会给你点。但我忘了说点什么。我该怎么做，点击手风琴的标题也会出现要在内容中编辑的文本字段，但是如果点击保存/取消按钮，它只会影响我选择的项目，标题或内容手风琴。 – yavg

通过单击按钮编辑项目。 Angular.js

相关推荐