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;
}

如何更改ng-show的名称 - ＆＃34; comment1＆＃34;动态（如果我改变，我也必须在脚本中更改名称）??还有其他方法吗？

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不需要。

动态更改ng-show和范围变量的名称

1 个答案: