AngularJs 仅编辑表单中的未定义或空字段答案

【问题标题】：AngularJs edit only undefined or null field in a FormAngularJs 仅编辑表单中的未定义或空字段
【发布时间】：2025-11-22 19:35:01
【问题描述】：

我需要通过文本输入仅来自 ng-repeat 的未定义字段进行编辑。例如这是一个可能的对象：

{
  "name": "Alex",
  "number": "12547",
  "visible": true,
  "text": undefined
}

我需要填写undefined 字段。但其他人没有！有什么问题？如果我写这样的东西：

<span ng-if="dataValue.text != undefined">
   {{dataValue.text}}
</span>
<input type="text" ng-if="dataValue.text == undefined" ng-model="dataValue.text" />

当我输入第一个字母时，输入消失了，因为它发现它不再是未定义的了！我不能编辑它！有什么快速的方法吗？摘要，我需要使未定义的字段不可编辑，但我需要编辑未定义的字段。在这种情况下，我不能使用一次性绑定。谢谢

代码在表格内。该示例显示了一个<td></td> 部分，其中有<span> 和<input>

【问题讨论】：

你可以使用一次性绑定语法并做ng-if="::dataValue.text == undefined"，我认为无论如何。
我试过了，但我做不到，因为表格有分页和更改页面，它将输入保持在上一页的相同位置
如何保留一份副本并使用它来显示/隐藏而不是实际对象本身？
@tanmay 应该是一种方式。但最后我必须使用原始对象，因为我必须将该数据发送到服务器
@End.Game 当然，我是说使用副本来显示/隐藏东西..您的模型来自原始对象本身..所以将其发送到服务器应该没有问题..

标签： javascript angularjs forms input

【解决方案1】：

你可以像这个例子那样处理

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
        <script>
            var app = angular.module('app', []);

            app.controller("MainCtrl", MainCtrl)
            MainCtrl.$inject = ['$scope'];
            function MainCtrl($scope) {
                $scope.dataValue = { "name": "Alex", "number": "12547", "visible": true, "text": undefined };
                $scope.changedataValue = function () {
                    $scope.dataValue.text = event.target.value;
                }
            }


        </script>
    </head>
    <body>
        <div ng-app="app" ng-controller="MainCtrl">
            <span ng-if="dataValue.text != null">{{dataValue.text}}
            </span>
            <input ng-blur="changedataValue()" type="text" ng-if="dataValue.text == null" />
        </div>
    </body>
    </html>

【讨论】：

它部分工作。我的意思是，一开始还可以，但我不能再次编辑它

【解决方案2】：

使用 ng-init 初始化一个值以禁用该字段。如果值不是null 或undefined 立即禁用它。否则，在模糊时再次检查它，如果您输入了一些内容，则禁用它，否则保持启用：

<input type="text" ng-init="dataValue.toDisable = !(dataValue.text == null)" ng-disabled="dataValue.toDisable" ng-model="dataValue.text" ng-blur="dataValue.toDisable = !(dataValue.text == null);"  />

查看双等号。这将禁用所有文本为空或未定义的输入，因为null == undefined。

【讨论】：

dataValue.toDisable 到底是什么？
一个新的属性创建运行时以禁用或不输入
嗯.. 更接近的答案是我认为的 sachila ranawaka'answer。我的意思是，这样我可以编辑我需要的内容，但是一旦焦点在输入之外，我就无法再次编辑它，如果我需要它。你明白了吗？
是的，您应该能够做到这一点，直到您填写该字段。以这种方式填充输入后，在模糊时，它将被禁用。但是如果你愿意，你可以在这一行添加一个ng-click="dataValue.toDisable=false;"，你应该在点击时实现编辑

【解决方案3】：

您可以在ng-blur 指令中调用函数并将模型分配给单独的变量。

<input type="text" ng-if="dataValue.text == undefined" ng-model="dataValue.sampleText" ng-blur="callFunc(dataValue)" />

在控制器中调用函数

$scope.callFunc = function(dataValue){
   if(dataValue.sampleText && dataValue.sampleText !== ''){
        dataValue.text = dataValue.sampleText
   }
}

【讨论】：

现在我试试这个方法
差不多。这是避免输入时在输入时消失的好方法。但是当然，当您在外部单击时，它会消失，我无法再对其进行编辑！
@End.Game 那么您可以使用ng-click 作为替代并将事件作为另一个参数传递。然后检查你按下的键是不是enter然后隐藏输入