单击同一行上的图标时如何取消隐藏图标?Asp.net MVC Angular js.

我想取消隐藏表格行中同一行的单击编辑图标上的图标。

这些编辑和保存图标根据记录生成，

我的代码是，

<td>
   <a ng-click="vm.Select(Survey.Id)" title="{{ 'Select' | translate }}">
     <i class="fa fa-edit fa-1x"></i>
   </a>
</td>
<td>
   <a ng-click="vm.Update(Survey.Id)" title="{{ 'Update Visit' | translate }}">
     <i class="fa fa-save fa-1x"></i>
   </a>
</td>

当我单击具有"选择"标题的图标时，标题为"更新访问"取消隐藏同一行

希望您的建议谢谢

这是一个基本的演示，可以使用ng-show和ng-hide来玩你的代码。您可以检查并调整代码

angular.module('App', []).controller('CrudCtrl', ['$scope',
  function($scope) {
    $scope.Profiles = [{
        name: "gede",
        country: "indonesia",
        editable: false
      },
      {
        name: "made",
        country: "thailand",
        editable: false
      }
    ];
    $scope.entity = {}
    $scope.edit = function(index) {
      $scope.entity = $scope.Profiles[index];
      $scope.entity.index = index;
      $scope.entity.editable = true;
    }
    $scope.delete = function(index) {
      $scope.Profiles.splice(index, 1);
    }
    $scope.save = function(index) {
      $scope.Profiles[index].editable = false;
    }
    $scope.add = function() {
      $scope.Profiles.push({
        name: "",
        country: "",
        editable: true
      })
    }
  }
]);

/* Styles go here */
body {
  margin: 10px;
  font-size: 14px;
  font-family: Arial;
}
table {
  border: 1px solid #333;
  border-collapse: collapse;
  width: 100%;
}
table tr td {
  border: 1px solid #333;
  padding: 10px;
}
table tr td span {
  cursor: pointer;
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
</head>
<body ng-app="App">
  <div ng-controller="CrudCtrl">
    <table>
      <tr>
        <td>Name</td>
        <td>Country</td>
        <td><span ng-click="add()">Add New</span></td>
      </tr>
      <tr ng-repeat="profile in Profiles">
        <td>
          <input type="text" ng-model="profile.name" ng-show="profile.editable">
          <span ng-hide="profile.editable">{{ profile.name }}</span>
        </td>
        <td>
          <input type="text" ng-model="profile.country" ng-show="profile.editable">
          <span ng-hide="profile.editable">{{ profile.country }}</span>
        </td>
        <td>
          <span ng-click="edit($index)" ng-hide="profile.editable">Edit</span>
          <span ng-click="save($index)" ng-show="profile.editable">Save</span>
          <span ng-click="delete($index)"> | Delete</span>
        </td>
      </tr>
    </table>
  </div>
</body>
</html>

相关内容

最新更新

热门标签：