Angular ng-model 返回未定义

问题描述

我正在处理一个旧项目，但过滤器有问题。所以这是 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",value: $scope.FilterEventsEdit }
        ]
    });
};

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

解决方法

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

$scope.FilterEventsEdit="";

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

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

<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",value: $scope.FilterEventsEdit}
        ]
    });*/
};

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

angular-ngmodel angularjs javascript