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

【问题标题】：Edit items by clicking a button. Angular.js通过单击按钮编辑项目。 Angular.js
【发布时间】：2017-06-02 05:03:01
【问题描述】：

我目前有一个动态编辑字段的指令。我在手风琴的标题中有一个要编辑的字段和手风琴内容中的另一个字段。如果我单击编辑按钮，则可以编辑相应行中的字段，并且效果很好。我的问题是当我保存或取消它时（当我单击保存或取消按钮时）立即消失标题的文本字段和标题的内容。对于要保存或取消的项目，我只需要文本字段消失。当您单击编辑按钮时，两个文本字段应同时出现在标题和内容中（这有效）。当点击保存或取消时，所选元素中的文本字段应该消失/出现。

  <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”吗？

标签： javascript angularjs

【解决方案1】：

对editState使用单向（单向）绑定

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

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

【讨论】：

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

【解决方案2】：

我相信您需要在控制器级别管理两个单独的布尔值，以便一个指令不会覆盖另一个指令的状态，然后您必须使用打开按钮设置两个布尔值。我保留了主状态，因此您的字形按钮将同时打开或关闭，并且保存/取消应该彼此独立运行。

$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

如果您希望它们的输入字段同时打开和关闭，您也可以通过指令传达主状态。

【讨论】：