Question

我正在使用这个plunker：

http://plnkr.co/edit/q7x2iz8tnnEC2mnsvLAK?p=preview

它工作正常

<tr ng-repeat="data in Value" >
    <td>
        <span ng-show="!data.edit">{{data.question}}</span>
        <input ng-show="data.edit" type="text" ng-model="data.question" class="form-control" placeholder="Name"/>
    </td>
    <td>{{data.name}}</td>
    <td><button id="{{data.id}}" ng-click="editUtterance(data)" class="glyphicon glyphicon-pencil edit">Edit</button></td>
    <td><button id="{{data.id}}" ng-click="save(data)" class="glyphicon glyphicon-pencil edit">Save</button></td>
</tr>

但我的问题是如果我点击编辑文本框启用那就没关系，如果我点击保存然后只有那个txtbox隐藏

如何禁用它？

angularjs点击其他行文本框时禁用其他文本框

如何解决这个问题？

Answer 1

您需要跟踪已单击的所有按钮并将其存储在堆栈中。每次编辑新的输入字段时，都需要将其索引添加到堆栈中。保存后（只能保存堆栈中的最顶层），需要从堆栈中弹出（删除）它（最后一个元素）。这将跳转到需要编辑的下一个输入字段。依此类推，直到你的筹码变空。

// Instantiate the app, the 'myApp' parameter must 
// match what is in ng-app
var myApp = angular.module('myApp', []);


myApp.controller('MyCtrl', function($scope) {
  $scope.Value = [{
    id: 1,
    question: 'question 1',
    name: 'name 1'
  }, {
    id: 2,
    question: 'question 2',
    name: 'name 2'
  }, {
    id: 3,
    question: 'question 3',
    name: 'name 3'
  }]
  $scope.selected = []; // initialise the array / stack
  $scope.editUtterance = function(data, index) {
    //alert(data.id); 
    data.edit = true;
    //console.log(data.edit);
    $scope.selected.push(index); // add to the stack
  }
  $scope.save = function(data) {
    data.edit = false;
    if ($scope.selected) {
      $scope.selected.pop(); // remove last element from the stack
    }
  }

});

<head>
  <script data-require="angular.js@1.2.7" data-semver="1.2.7" src="https://code.angularjs.org/1.2.7/angular.js"></script>
</head>

<body ng-controller="MyCtrl" ng-app="myApp">
  <span ng-show="!edit">{{data.question}}</span>
  <table>
    <thead>
      <tr>col 1</tr>
    </thead>
    <tbody>
      <tr ng-repeat="data in Value">
        <td>
          <span ng-show="!data.edit">{{data.question}}</span>
          <input ng-show="data.edit" ng-disabled="selected[selected.length-1] != $index" type="text" ng-model="data.question" class="form-control" placeholder="Name" />
        </td>
        <td>{{data.name}}</td>
        <td><button id="{{data.id}}" ng-click="editUtterance(data,$index)" class="glyphicon glyphicon-pencil edit">Edit</button></td>
        <td><button id="{{data.id}}" ng-disabled="selected[selected.length-1] != $index" ng-click="save(data)" class="glyphicon glyphicon-pencil edit">Save</button></td>
      </tr>
    </tbody>
  </table>
  Previously selected: {{selected}}

  <script>
  </script>
</body>

angularjs单击行时禁用其他文本框

1 个答案: