Предоставление действия только нажатой кнопке в ng-repeat

Я работаю с ng-repeat. В ng-repeat я повторяю панель. Тело панели состоит из двух частей. Первая часть — это параграф, который я извлекаю из базы данных, используя $http.get(). Во второй части у меня есть кнопка (кнопка редактирования). Когда я нажимаю кнопку редактирования, абзац в первой части должен быть скрыт, а текстовая область должна отображаться с содержимым в абзаце по умолчанию. Но когда я пытаюсь достичь этого, я получаю представление, когда я нажимаю одну кнопку редактирования, все мои параграфы скрываются, и появляется текстовая область. Как я могу ограничить ее.

$scope.editorEnabled = false;

$scope.enableEditor = function() {
  $scope.editorEnabled = true;
};
<div ng-repeat="(key,rec) in recordcomment">
  <div class="row">
    <div class="col-md-10">
      <div class="panel panel-default">
        <div class="panel-heading">
          heading
        </div>
        <div class="panel-body" style="background-color:white;">
          <p ng-hide="editorEnabled">{{rec.comment}}</p>
          <textarea ng-model="rec.comment" ng-show="editorEnabled"></textarea>
          <button class="btn btn-primary pull-right" ng-click="enableEditor()">Edit</button>
        </div>
      </div>
    </div>
  </div>
</div>


angularjs angularjs-ng-repeat ng-show ng-hide
person dockerrrr    schedule 11.01.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward 

<div class="panel-body" style="background-color:white;">
          <p ng-hide="rec.editorEnabled">{{rec.comment}}</p>
          <textarea ng-model="rec.comment" ng-show="rec.editorEnabled"></textarea>
          <button class="btn btn-primary pull-right" ng-click="enableEditor(rec)">Edit</button>
        </div>

     $scope.enableEditor = function(context) {
          context.editorEnabled = true;
     };

Используйте rec вместо this

Поскольку это означает текущий контекст директивы ng-repeat.

Итак, чтобы сделать его эффективным, нам нужно изменить объект...

Следовательно, нам нужно передать его, так как я использую rec в параметре функции.

Попробуйте это на случай, если прокомментируете

person Pankaj Badukale    schedule 11.01.2017
comment
эй бро у меня есть еще один dbt - person dockerrrr; 11.01.2017

arrow_upward
1
arrow_downward

Добавьте объект editorEnabled с объектом ng-rpeat. так что это будет рассмотрено с объектом массива. и вы можете передать this текущий объект через click function() и установить true/false для объекта editorEnabled.

Код выглядит так.

        <div class="panel-body" style="background-color:white;">
          <p ng-hide="rec.editorEnabled">{{rec.comment}}</p>
          <textarea ng-model="rec.comment" ng-show="rec.editorEnabled"></textarea>
          <button class="btn btn-primary pull-right" ng-click="enableEditor(this)">Edit</button>
        </div>

         $scope.enableEditor = function(context) {
             context.editorEnabled = true;
         };
person Ramesh Rajendran    schedule 11.01.2017
comment
когда я нажимаю на кнопку, никаких действий не происходит - person dockerrrr; 11.01.2017
comment
Поставьте функцию оповещения и проверьте. также проверьте, есть ли у вашей консоли какие-либо проблемы. если проблема там, просто измените эту строку на `ng-click=enableEditor(rec)›` - person Ramesh Rajendran; 11.01.2017
comment
эй, у меня есть еще один дбт - person dockerrrr; 11.01.2017
comment
Какие сомнения, скажи мне. - person Ramesh Rajendran; 11.01.2017
comment
есть ли способ сделать это текстовое поле активным, когда мы нажимаем на редактирование. я пробовал с активным классом - person dockerrrr; 11.01.2017