CODEWITHSUNDEEP
javascriptangularjs
Umapathi
Umapathi

Reputation: 568

Enable text box while perform events in angularjs

I am using ng-repeat to printing data.here i added one replay button.based on reply button enable text box under replay button.

but when i click replay button text boxes are enable all the replay buttons.

Thank you...!

Controller Code

getForumOnIdAnswer(fAnsId);
        function getForumOnIdAnswer (fAnsId){
            ForumRepository.getForumOnIdAnswer(fAnsId)
            .then(function (response){
                scope.forumAnswer=response;
            },
             function(errResponse){
                 console.error('Error while fetching forumAnser');
             }
            );
        };

html code

<div ng-repeat="forumAnswerData in forumAnswer">
                    <div class="panel-group">
                        <div class="panel panel-success">
                            <div class="panel-heading">
                                <a href="">{{forumAnswerData.farmer.firstName}}</a>
                                <div class="pull-right">{{ forumAnswerData.answerDate |
                                    date:"MM/dd/yyyy 'at' h:mma" }}</div>
                            </div>
                            <div class="panel-body">{{forumAnswerData.answer}}</div>
                            <div class="panel-footer">
                                <button type="button" class="btn btn-danger" ng-click="">Reply</button>
                            </div>
                        </div>
                    </div>
                </div>

view

Upvotes: 0

Views: 84

Answers (2)

&#193;lvaro Touz&#243;n
&#193;lvaro Touz&#243;n

Reputation: 1230

the code i think will work, using your own repeater in view is:

<div ng-repeat="forumAnswerData in forumAnswer" ng-init="forumAnswerData.buttonEnabled=false;">
                    <div class="panel-group" ng-click="forumAnswerData.buttonEnabled=true">
                        <div class="panel panel-success">
                            <div class="panel-heading">
                                <a href="">{{forumAnswerData.farmer.firstName}}</a>
                                <div class="pull-right">{{ forumAnswerData.answerDate |
                                    date:"MM/dd/yyyy 'at' h:mma" }}</div>
                            </div>
                            <div class="panel-body">{{forumAnswerData.answer}}</div>
                            <div class="panel-footer">
                                <button type="button" class="btn btn-danger" ng-click="" ng-disabled="forumAnswerData.buttonEnabled">Reply</button>
                            </div>
                        </div>
                    </div>
                </div>

Expect it helps you

Upvotes: 0

Hadi
Hadi

Reputation: 17289

It should be like this. just for enabling textbox. 

<div ng-repeat="forumAnswerData in forumAnswer">
  <div class="panel-group">
    <div class="panel panel-success">
      <div class="panel-heading">
        <a href="">{{forumAnswerData.farmer.firstName}}</a>
        <div class="pull-right">{{ forumAnswerData.answerDate | date:"MM/dd/yyyy 'at' h:mma" }}</div>
      </div>
      <div class="panel-body">{{forumAnswerData.answer}}</div>
      <div class="panel-footer">
        <textarea ng-model="yourModel" ng-show="$index ==currentTextBox"></textarea>
        <button type="button" class="btn btn-danger" ng-click="currentTextBox = $index">Reply</button>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions