search

Home  >  Q&A  >  body text

angular.js - Angular 中用ng-repeat搞的列表项,我想点击其中一个列表项就将改项隐藏改怎么做

<tr ng-repeat = "app in apps" ng-hide = "">
            <td>
                <a  data-uk-modal="{target:'#{{app._id}}'}">{{app.name}}</a>
            </td>
            <td>{{app._id}}</td>
            <td>{{app.author}}</td>
            <td>{{appCategoryMap[app.category].name}}</td>
            <td>
                <a  class="uk-button uk-button-danger" ng-click  = "underCarriage(app._id)">下架</a>
            </td>

        </tr>

ng-hide里面应该怎么去写,如果写入变量的话,全部的列表项都是同一个ng-hide变量无法隐藏单个

怪我咯怪我咯2743 days ago916

reply all(2)I'll reply

  • phpcn_u1582

    phpcn_u15822017-05-15 16:51:24

    Please describe your problem carefully, so that others will take your problem seriously.

    You just want to click "Remove" and this row will disappear from the table. In fact, it is to delete a record in the data, AngularJS的绑定机制会自动的更新界面,这一行也就会自动消失了。不需要使用ng-hide.

    You just need to implement it wellunderCarriage(app._id):

    controllers.controller('SFTestCtrl', ['$scope', function($scope) {
      $scope.apps = [
        {
          _id: 0,
          name: 'test',
          author: 'test',
          category: 'test'
        },
        {
          _id: 1,
          name: 'test1',
          author: 'test1',
          category: 'test1'
        },
        {
          _id: 2,
          name: 'test2',
          author: 'test2',
          category: 'test2'
        }
      ];
    
      $scope.appCategoryMap = {
        test: {
          name: 'test'
        },
        test1: {
          name: 'test1'
        },
        test2: {
          name: 'test2'
        }
      };
    
      $scope.underCarriage = function(id) {
        $scope.apps.forEach(function(v, i, _) {
          if (v._id == id) {
            _.splice(i, 1);
          }
        });
      };
    
    }]);
    

    My local test can achieve the effect.

    reply
    0
  • 天蓬老师

    天蓬老师2017-05-15 16:51:24

    Add a hidden attribute to apps to record whether it is hidden

    http://jsfiddle.net/larvata/1wr2bfLs/

    reply
    0
  • Cancelreply