Динамически меняющееся имя ng-show и переменная области видимости

Question

Я извлекаю содержимое из базы данных с помощью $ http.get api и отображаю каждую запись, используя ng-repeat. Для каждой записи у меня есть кнопка like and comment. При нажатии на comment button, я покажу input box with send button, ранее он будет скрыт (с помощью ng-show). Проблема заключается в том, что при нажатии любой из кнопок комментариев записи будет отображаться все другие поля ввода записей с кнопкой отправки, включая щелчок.

<div ng-repeat="dat in details"> 
    <ul> 
    <li><b>Product:</b><span> {{dat.product_name}}</span></li> 
    </ul> 
    <button style="background-color:#4C97C8;color:white;height:30px" class="btn buttonlike" ng-click="likebtn(dat.id,loginname)"><span class="glyphicon glyphicon-hand-right"></span><strong> Like</strong></button> 
    <button style="background-color:#4C97C8;color:white;height:30px" class="btn" ng-click="mycomment()"><span class="glyphicon glyphicon-comment"></span><strong> Comment</strong></button> 
    <div class="input-group" ng-show="comment1"> 
    <input type="text" class="form-control" placeholder="comment" aria-describedby="basic-addon2"> 
    <span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-send"></span></span> 
    </div> 
</div> 

mycomment() метод в сценарии выглядит как-

$scope.comment1= false; 
$scope.mycomment = function() { 
    $scope.comment1= true; 
} 

Как я могу изменить название нг-шоу- «comment1» динамически (если я изменю, я должен изменить имя в сценарии тоже) ?? Есть ли другой путь?

Answer 1

Попробуйте это:

<div ng-repeat="dat in details | filter : { product_name : textname} as results"> 
    <hr/> 
    <p style="color:#4C97C8;" class="lead"><strong>{{dat.summary}}</strong></p> 
    <ul> 
    <li><b>Product:</b><span> {{dat.product_name}}</span></li> 
    <li><b>Product Manager:</b><span> {{dat.first_name}} {{dat.last_name}}</span></li> 
    <li><b>Description:</b><span> {{dat.description}}</span></li> 
    </ul> 
    <button style="background-color:#4C97C8;color:white;height:30px" class="btn buttonlike" ng-click="likebtn(dat.id,loginname)"><span class="glyphicon glyphicon-hand-right"></span><strong> Like</strong></button> 
    <button style="background-color:#4C97C8;color:white;height:30px" class="btn" ng-click="comment=true"><span class="glyphicon glyphicon-comment"></span><strong> Comment</strong></button> 
    <div class="input-group" ng-show="comment"> 
    <input type="text" class="form-control" placeholder="comment" aria-describedby="basic-addon2"> 
    <span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-send"></span></span> 
    </div> 
</div> 

Вместо ng-click="mycomment()" и ng-show="comment1": ng-click="comment=true" и ng-show="comment" соответственно. $scope.comment1 и $scope.mycomment не нужны.