ng-click 在 ng-repeat 上显示所有隐藏的文本字段，而不是 Angular 中的一个

Question

我开始使用 Angular，实现起来非常好，我在 ng-click

遇到了一个问题

我正在动态获取数据并使用 ng-repeat 显示，我想在单击铅笔时更新数据，为此我正在使用 input text element，但是当我单击铅笔时它会打开所有text fields

这是我的HTML代码

<

div ng-repeat="item in scroller.items track by $index">
       <div class="secHead text-center">
         <button class="common btnDarkGrey" data-ng-hide="hideCatButton">{{item.category_name}}</button>
         <input type="text" id="focus-{{$index}}" class="common btnDarkGrey editDashboardCategory" name="editCategory" value="" data-ng-model="item.category_name" data-ng-show="hideField">
     <span  data-ng-click="updateCategory(item.category_id,item.category_name,$index)"   class="chkOneDone" data-ng-show="hideOkButton">Done</span>
       <div class="pull-right">
           <a href="#" class="pen" data-ng-click="updatePen($index)"></a>
     </div>
    </div>
     </div>

我在这里Angular code

   $scope.updateCategory=function(category_id,updated_cat_name, $index){
        Category.updateCat($rootScope,$scope,$index,$http,$timeout,updated_cat_name,old_cat_name,category_id);
    };
$scope.updatePen=function($index){
        old_cat_name=$scope.scroller.items[$index].category_name
        $scope.hideField=true;
        $rootScope.hideOkButton=true;
        $rootScope.hideCatButton=true;

};

我创建了一个 Category service 来执行类似 update

的任务

我还没有得到任何合适的解决方案。

有人可以帮我吗？

谢谢。

Answer 1

如果您只想 hide/show 列表中的一个元素，您需要以某种方式指定它。现在你有三个 rootScope 布尔值： $scope.hideField=true; $rootScope.hideOkButton=true; $rootScope.hideCatButton=true; 为整个列表设置，您需要为列表中的每个人设置显示属性。

在你的控制器功能中，你可以在你期待点击之前做这样的事情：

//normal for loop so that you have the index
for(var i=0; i < $scope.scroller.items.length; i++){
  $scope.scroller.items[i].show = false;
}

然后你可以做这样的事情来实际显示字段：

HTML:
  div ng-repeat="item in scroller.items track by $index">
   <div class="secHead text-center">
     <button class="common btnDarkGrey" ng-hide="!item.show">
       {{item.category_name}}</button>
     <input type="text" id="focus-{{$index}}" class="common btnDarkGrey editDashboardCategory" name="editCategory" value="" ng-model="item.category_name" ng-hide="!item.show">
 <span  data-ng-click="updateCategory(item.category_id,item.category_name,$index)"   class="chkOneDone" ng-show="item.show">Done</span>
   <div class="pull-right">
       <a href="#" class="pen" data-ng-click="updatePen($index)"></a>
 </div>
</div>
 </div> 

Controller:
  //controller declaration --
    $scope.updatePen = function(index){
      $scope.scroller.items[index].show = true;
    };

据我了解，一旦发生点击，您需要显示所有三个属性，因此我将所有显示属性压缩到一个显示中属性。

您的视图只会看到 hideField 为真，并对数组中的所有项目执行该操作。希望对您有所帮助！

ng-click 在 ng-repeat 上显示所有隐藏的文本字段，而不是 Angular 中的一个

ng-click showing all the hidden text field on ng-repeat rather than one in Angular

angularjs

angularjs-scope

angularjs-ng-repeat