Question

我找不到任何有用的东西来解决我的问题，所以希望我能在这里得到答案。

下面是一个简化的代码段。

我想要实现的是，在输入字段模糊处，C的新值保存到DB。此外，当单击X时，该字段将被清空，并且不会保存任何内容。问题是，当用户在输入字段中键入内容然后改变他/她的思想并清空它时，ng-blur触发（这是合乎逻辑的，因为它不在元素之外）并且新输入的值被保存到字段清空之前的db。如果我从输入字段中删除模糊事件并将其放置在整个＆＃34; X＆＃34;按钮的工作方式应该如此，但模糊事件永远不会触发。

我不能再在表格中添加任何额外的元素了，所以必须以某种方式解决这个问题。

＆＃13;

angular.module("App", [])
.controller("Ctrl", function(){
  
    this.items = [
        {A: "111", B: "222", C: "333"},
        {A: "111", B: "222", C: "333"},
        {A: "111", B: "222", C: "333"},
        {A: "111", B: "222", C: "333"},
        {A: "111", B: "222", C: "333"}
        ];
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App">
    <div ng-controller="Ctrl as ctrl">
        <table ng-repeat="item in ctrl.items">
          <tbody>
            <tr>
                <td>{{item.A}}</td>
                <td>{{item.C || item.B}}</td>
                <td><a ng-click="showInput = !showInput"> edit</a> </td>                
            </tr>
          <tr ng-hide="!showInput">
            <td><input ng-blur="showInput = false" type="text" ng-model="item.C" placeholder="Your name for item A"/></td>
              <td><a ng-click="item.C = null">X</a></td>
          </tr>
            </tbody>
        </table>
    </div>
</div>

＆＃13;

我还在学习角度，所以如果我错过了什么，我很抱歉。任何建议都非常感谢。

编辑：

我忘记在我的应用中提及输入字段在保存值后消失。所以没有＆＃34; X＆＃34;触发。
我将ng-blur移动到输入字段以引起对我确切问题的关注。这不起作用：万一用户改变主意（根本不想保存新价值）并点击＆＃34; X ＆＃34;，ng -blur仍然触发并保存值。 不应该

。

编辑后的代码段更为明显。

ng-blur和表格元素

0 个答案: