Question

＆＃13;

var app = angular.module('plunker', []);
json = [1,2,3]
app.controller('MainCtrl', function($scope) {
  $scope.edit = function(){
     $scope.editMode = true;
  };
 
  $scope.data = json;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <li ng-click="edit()" ng-repeat="d in data">
      {{d}}
      <button ng-show="editMode == true">button</button>
    </li>
    
  </body>

</html>

＆＃13;

当我点击指定的li时，所有按钮都会显示，如何只显示li内的按钮？我知道在jquery你必须使用$(this)，但在angularjs中怎么样？

Answer 1

由于您使用的是被转换的元素，li内的所有元素都拥有相同的范围。

您可以为数组中的每个元素设置编辑状态，例如

＆＃13;

var app = angular.module('plunker', []);
json = [1, 2, 3]
app.controller('MainCtrl', function($scope) {
  $scope.editMode = [];
  $scope.edit = function(index) {
    $scope.editMode[index] = true;
  };

  $scope.data = json;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <li ng-click="edit($index)" ng-repeat="d in data">
    {{d}}
    <button ng-show="editMode[$index]">button</button>
  </li>

</body>

</html>

＆＃13;

另一个选项是（如果你想一次只允许编辑1个元素）

＆＃13;

var app = angular.module('plunker', []);
json = [1, 2, 3]
app.controller('MainCtrl', function($scope) {
  $scope.editMode = -1;
  $scope.edit = function(index) {
    $scope.editMode = index;
  };

  $scope.data = json;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <li ng-click="edit($index)" ng-repeat="d in data">
    {{d}}
    <button ng-show="editMode == $index">button</button>
  </li>

</body>

</html>

＆＃13;

在视图中使用$ scope

1 个答案: