Angular ng-model返回未定义的[重复]答案

【问题标题】：Angular ng-model returns undefined [duplicate]Angular ng-model返回未定义的[重复]
【发布时间】：2021-01-27 12:52:16
【问题描述】：

我正在处理一个旧项目，但过滤器存在问题。所以这是html部分。

<input type="text" class="form-control" ng-model="FilterEventsEdit"
       ng-change="FilterEvents()"
       style="width: 300px; margin-bottom: 5px; display: inline;">

这里是 JS

$scope.FilterEvents = function () {
    $scope.EventsGridDataSource.filter({
        logic: "or",
        filters: [
            { field: "Name", operator: "contains",
              value: $scope.FilterEventsEdit },
            { field: "Expression", operator: "contains",
              value: $scope.FilterEventsEdit }
        ]
    });
};

我总是把$scope.FilterEventsEdit 当作undefined。我有相同的逻辑，但使用不同的模型，它们正在工作。在这里找不到问题所在。

【问题讨论】：

尝试将您的模型定义为 $scope.FilterEventsEdit = "";在你的控制器中
那没用。但解决方案是在控制器中添加一个对象 $scope.Filters = {} ，然后传递该对象中的变量。发生这种情况是因为我在 ng-if 的输入上方有一个 div，而 ng-if 正在创建一个子范围。

标签： javascript angularjs angular-ngmodel

【解决方案1】：

使用前需要初始化 $scope.FilterEventsEdit 变量。

$scope.FilterEventsEdit="";

$scope.FilterEvents = function () {
    $scope.EventsGridDataSource.filter({
        logic: "or",
        filters: [
            { field: "Name", operator: "contains", value: $scope.FilterEventsEdit },
            { field: "Expression", operator: "contains", value: $scope.FilterEventsEdit }
        ]
    });
};

【讨论】：

【解决方案2】：

在您的控制器中，您确实可以通过 ng-model 获得文本框的正确值。如果您在文本框中输入任何内容，则会触发该事件。但是，当页面加载时，您应该检查 $scope.FilterEventsEdit 的初始值是多少。如果未设置，则默认为未定义。但是您的方法仅在输入文本更改时才被调用。我尝试了一个示例 JS fiddle，它似乎工作正常。代码如下：sn-p：

<input type="text" class="form-control" ng-model="FilterEventsEdit" ng-change="FilterEvents()" style="width: 300px; margin-bottom: 5px; display: inline;">

// assigning empty string by default. You may have some default value as per your use case
$scope.FilterEventsEdit = '';
// Here you will see empty string getting logged in console. If above default value is not assigned, you will get undefined here.
console.log('filterEventsEdit: ', $scope.FilterEventsEdit);

$scope.FilterEvents = function () {
    console.log($scope.FilterEventsEdit);
    /* commenting this to test in my JS fiddle
     $scope.EventsGridDataSource.filter({
        logic: "or",
        filters: [
          { field: "Name", operator: "contains", value: $scope.FilterEventsEdit },
          { field: "Expression", operator: "contains", value: $scope.FilterEventsEdit}
        ]
    });*/
};

同样在方法内部，您将获得文本框的当前值。在此处查看工作中的 JS fiddle，您可以使用：https://jsfiddle.net/sagarag05/4jb1cpog/6/

【讨论】：