当我们提交表单时，未找到传递旧值的 md-autocomplete? [英] md-autocomplete not found passing the old values when we submit the form?

查看：19
本文介绍了当我们提交表单时，未找到传递旧值的 md-autocomplete?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在我的网站上实施了 md-autocomplete.搜索和选择有效，它更新显示的列表和所有内容.但是由于某种原因，如果我输入错误的值意味着未列出值，我确实提交了 $scope 中的旧选择值

期望:

如果我开始在自动完成中输入未列出的值然后我提交我应该得到我在自动完成字段中输入的内容我该怎么做

例如输入 M 和自动完成列表 Mobile do select 和 do submit 我们将得到 {Type: "Mobile", Value: "2400"}

并开始输入 Mobilesss 并提交，我们将获得相同的值 {Type: "Mobile", Value: "2400"}

但是我期望在我们提交时自动完成中的内容我应该在提交时进入控制台

angular.module('MdAutocompleteBugApp', ['ngMaterial']).controller('MdAutocompleteBugController', function ($scope, $q, $timeout) {$scope.data = {};$scope.save = 函数 () {console.log($scope.data);console.log("dd");}$scope.selectedItemChange = function(item){如果(项目){$scope.data.Type = item.Type;$scope.data.Value = item.Value;}控制台日志(项目)；}$scope.datas = [{"类型": "手机",价值":2400"}, {"类型": "笔记本电脑",值":5677"}, {"类型": "手机",价值": ""},{"类型": "电视",价值": ""}];var elementId = [];$scope.newArr = $scope.datas.filter(el => {if (elementId.indexOf(el.Type) === -1) {elementId.push(el.Type);返回真；}});console.log($scope.newArr);$scope.getMatches = 函数(搜索文本){var deferred = $q.defer();$超时(函数(){deferred.resolve($scope.newArr.filter(function (config) {if (config.Type && config.Type != "")返回 angular.lowercase(config.Type).indexOf(angular.lowercase(config.Type)) >-1;别的错误的;}))}, 0);返回 deferred.promise;}});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-aria.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.3/angular-material.min.js"></script><link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.3/angular-material.min.css"><div ng-app="MdAutocompleteBugApp"><div ng-controller="MdAutocompleteBugController as vm"><form name = "test" ng-submit="save()"><md-toolbar class="md-padding"><md-自动完成md-selected-item="类型"md-search-text="searchText"md-selected-item-change="selectedItemChange(item)"md-items="getMatches(searchText) 中的项目"md-item-text="item.Type"占位符=搜索状态"md-no-cache="true"><md-item-模板><span>{{item.Type}} </span></md-item-template></md-自动完成></md-工具栏><br>值 <input type="text" ng-model="data.Value"><br><br><br><button type="submit">submit</button></表单>

解决方案

当您从自动完成建议中选择任何项目时，它会触发 selectedItemChange 功能，并且当您提交表单时(按 Enter，在此case)，触发save函数.

因此，如果您第一次从建议中选择任何项目，它将触发 selectedItemChange 函数并更新 $scope.data，下次，如果你写了任何不在模型中的东西，它不会在自动完成建议中显示任何东西，所以你不能触发 selectedItemChange，因此 $scope.data 之前更新的值不会更新，现在提交表单，在控制台中记录 $scope.data 的先前值.

如果你只是想更新(覆盖)$scope.data的值，每次更改AutocompleteSelection时，试试这个

$scope.selectedItemChange = function(item) {如果(项目){$scope.data.Type = item.Type;$scope.data.Value = item.Value;} 别的 {$scope.data = null;}}

以及提交表单时

$scope.save = function () {如果($scope.data){console.log('提交表单');console.log($scope.data);} 别的 {//提示错误，或显示验证信息console.log("从自动完成中选择一些东西");}

Edit => 设置默认值，如果没有从自动完成中选择，则.将 searchText 变量传递给模板中的保存函数，如

ng-submit="save(searchText)"

和修改保存功能，设置默认，如果没有选择

$scope.save = function (inputVal) {var 有效载荷 = $scope.data;如果(！$scope.data){有效载荷 = {类型:输入值，价值: ""}}//调用保存api}

angular.module('MdAutocompleteBugApp', ['ngMaterial']).controller('MdAutocompleteBugController', function ($scope, $q, $timeout) {$scope.data = null;$scope.save = 函数(输入值){var 有效载荷 = $scope.data;如果(！$scope.data){有效载荷 = {类型:输入值，价值: ""}}if ($scope.data && $scope.data.Value && !$scope.data.Type) {有效载荷 = {类型:输入值，值:$scope.data.Value}}调试器控制台日志(有效负载)//调用保存api}$scope.selectedItemChange = function(item) {如果(项目){$scope.data = {};$scope.data.Type = item.Type;$scope.data.Value = item.Value;$scope.save();} 别的 {$scope.data = null;}}$scope.datas = [{"类型": "手机",价值":2400"}, {"类型": "笔记本电脑",值":5677"}, {"类型": "手机",价值": ""},{"类型": "电视",价值": ""}];var elementId = [];$scope.newArr = $scope.datas.filter(el => {if (elementId.indexOf(el.Type) === -1) {elementId.push(el.Type);返回真；}});console.log($scope.newArr);$scope.getMatches = 函数(搜索文本){var deferred = $q.defer();$超时(函数(){deferred.resolve($scope.newArr.filter(function (config) {if (config.Type && config.Type != "")返回 angular.lowercase(config.Type).indexOf(angular.lowercase(config.Type)) >-1;别的错误的;}))}, 0);返回 deferred.promise;}});

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-aria.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.3/angular-material.min.js"></script><link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.3/angular-material.min.css"><div ng-app="MdAutocompleteBugApp"><div ng-controller="MdAutocompleteBugController as vm"><form name = "test" ng-submit="save(searchText)"><md-toolbar class="md-padding"><md-自动完成md-selected-item="类型"md-search-text="searchText"md-selected-item-change="selectedItemChange(item)"md-items="getMatches(searchText) 中的项目"md-item-text="item.Type"占位符=搜索状态"md-no-cache="true"><md-item-模板><span>{{item.Type}} </span></md-item-template></md-自动完成></md-工具栏><br>值 <input type="text" ng-model="data.Value"><br><br><br><button type="submit">submit</button></表单>

I have implemented an md-autocomplete on my site. The search and selecting works, It updates the shown list and everything. But for some reason if i enter wrong values means not listed value and i do submit i am getting old selection value in $scope

Expectation :

if i start typing not listed value in autocompleted then i do submit i should get what ever i entered in autocomplete field how can i do this

For example type M and autocomplete list Mobile do select and do submit we will get {Type: "Mobile", Value: "2400"}

and start type Mobilesss and do submit we will get same value {Type: "Mobile", Value: "2400"}

but my expectation what ever there in autocomplete while we submitting i should get in console when we do submit 

angular

    .module('MdAutocompleteBugApp', ['ngMaterial'])

    .controller('MdAutocompleteBugController', function ($scope, $q, $timeout) {

     $scope.data = {};
        $scope.save = function () {
            console.log($scope.data);
            console.log("dd");
        }
$scope.selectedItemChange = function(item)
{
if(item){
$scope.data.Type = item.Type;
$scope.data.Value = item.Value;
}


console.log(item);
}

        $scope.datas = [{

                "Type": "Mobile",

                "Value": "2400"

            }, {

                "Type": "laptop",

                "Value": "5677"


            }, {

                "Type": "Mobile",

                "Value": ""

            },

            {

                "Type": "tv",
				"Value": ""
               
            }
        ];



        var elementId = [];

        $scope.newArr = $scope.datas.filter(el => {

            if (elementId.indexOf(el.Type) === -1) {


                elementId.push(el.Type);

                return true;

            }

        });


        console.log($scope.newArr);

        $scope.getMatches = function (searchText) {

		var deferred = $q.defer();

                $timeout(function () {

                    deferred.resolve($scope.newArr.filter(function (config) {

                        if (config.Type && config.Type != "")

                            return angular.lowercase(config.Type).indexOf(angular.lowercase(config.Type)) > -1;

                        else

                            false;

                    }))

                }, 0);

                return deferred.promise;
		
		
           
        }

    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-aria.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.3/angular-material.min.js"></script>

 

      <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.3/angular-material.min.css">
<div ng-app="MdAutocompleteBugApp">

    <div ng-controller="MdAutocompleteBugController as vm">

       
   <form name = "test" ng-submit="save()">
        <md-toolbar class="md-padding">

            <md-autocomplete 
			md-selected-item="Type" 
			md-search-text="searchText" 
			md-selected-item-change="selectedItemChange(item)"
			md-items="item in getMatches(searchText)" 
			md-item-text="item.Type" 
			placeholder="Search states" 
			md-no-cache="true">
				<md-item-template>
                    <span>{{item.Type}} </span>
                </md-item-template>
               
            </md-autocomplete>
        </md-toolbar><br>
		Value <input type="text" ng-model="data.Value">
		<br><br><br>
		<button type="submit">submit</button>
		
</form>
    </div>

解决方案

When You Select Any Item From Autocomplete suggestion, then it trigger selectedItemChange function, and when you submit form (pressing Enter, in this case), it trigger save function.

so if you select any item from suggestion at first time, it'll trigger selectedItemChange function and update $scope.data, and next time, if you write anything, which is not in model, it will not show anything in autocomplete suggestion, so you cant able trigger selectedItemChange, and thus $scope.data previously updated value not update, and now submitting form, log previous value of $scope.data in console.

if you just want to update (override) value of $scope.data, each time you changeAutocompleteSelection, try this

$scope.selectedItemChange = function(item) {
  if(item){
    $scope.data.Type = item.Type;
    $scope.data.Value = item.Value;
  } else {
    $scope.data = null;
  }
}

and when submitting form

$scope.save = function () {
  if ($scope.data) {
    console.log('submitting form');
    console.log($scope.data);
  } else {
    // prompt error, or show validation message
    console.log("select something from autocomplete");
  }

Edit => to set default value, if nothing selected from autocomplete, then. pass searchText variable into save function in template, like

ng-submit="save(searchText)"

and modified save function, to set default, if nothing selected

$scope.save = function (inputVal) {
  var payload = $scope.data;
  if (!$scope.data) {
    payload = {
     Type: inputVal, 
     Value: ""
    }
  }
  //calling save api
} 


angular
.module('MdAutocompleteBugApp', ['ngMaterial'])
.controller('MdAutocompleteBugController', function ($scope, $q, $timeout) {
     $scope.data = null;
     $scope.save = function (inputVal) {
       var payload = $scope.data;
       if (!$scope.data) {
         payload = {
          Type: inputVal, 
           Value: ""
         }
       }
       if ($scope.data && $scope.data.Value && !$scope.data.Type) {
          payload = {
          Type: inputVal, 
           Value: $scope.data.Value
         }
      }
      debugger
       console.log(payload)
    //calling save api
    } 
    $scope.selectedItemChange = function(item) {
    if(item){
      $scope.data = {};
      $scope.data.Type = item.Type;
      $scope.data.Value = item.Value;

      $scope.save();
      } else {
      $scope.data = null;
      }
   }

    $scope.datas = [{

            "Type": "Mobile",

            "Value": "2400"

        }, {

            "Type": "laptop",

            "Value": "5677"


        }, {

            "Type": "Mobile",

            "Value": ""

        },

        {

            "Type": "tv",
			"Value": ""
           
        }
    ];

    var elementId = [];

    $scope.newArr = $scope.datas.filter(el => {
        if (elementId.indexOf(el.Type) === -1) {
            elementId.push(el.Type);
            return true;
        }
    });

    console.log($scope.newArr);

    $scope.getMatches = function (searchText) {
	    var deferred = $q.defer();
         $timeout(function () {
            deferred.resolve($scope.newArr.filter(function (config) {
                if (config.Type && config.Type != "")
                    return angular.lowercase(config.Type).indexOf(angular.lowercase(config.Type)) > -1;
                else
                    false;
            }))
         }, 0);

         return deferred.promise;
    }
});

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-aria.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.3/angular-material.min.js"></script>

     

          <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.3/angular-material.min.css">
    <div ng-app="MdAutocompleteBugApp">

        <div ng-controller="MdAutocompleteBugController as vm">

           
       <form name = "test" ng-submit="save(searchText)">
            <md-toolbar class="md-padding">

                <md-autocomplete 
    			md-selected-item="Type" 
    			md-search-text="searchText" 
    			md-selected-item-change="selectedItemChange(item)"
    			md-items="item in getMatches(searchText)" 
    			md-item-text="item.Type" 
    			placeholder="Search states" 
    			md-no-cache="true">
    				<md-item-template>
                        <span>{{item.Type}} </span>
                    </md-item-template>
                   
                </md-autocomplete>
            </md-toolbar><br>
    		Value <input type="text" ng-model="data.Value">
    		<br><br><br>
    		<button type="submit">submit</button>
    		
    </form>
        </div>

这篇关于当我们提交表单时，未找到传递旧值的 md-autocomplete?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆