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

问题描述

我在我的网站上实施了md-autocomplete。搜索和选择工作，它更新显示的列表和一切。但由于某种原因，如果我输入错误的值意味着没有列出价值，我确实提交我在$ scope中获得旧选择值

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

期望：

如果我开始在autocompleted中输入未列出的值，那么我确实提交我应该得到我在autocomplete字段中输入的内容我该怎么做

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

例如类型M和自动完成列表移动确实选择并提交我们将获得{类型：移动，价值：2400}

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

并开始输入Mobilesss和提交，我们会获得相同的价值{类型：移动，价值：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>

推荐答案

当您从自动填充建议中选择任何项目时，它会触发 selectedItemChange 功能，当您提交表单时（按Enter键，在这种情况下），它会触发保存功能。

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.

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

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.

如果你只是想更新（覆盖）$ scope.data的值，每次你改变自动完成选择时，试试这个

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;
  }
}

以及提交表格时

$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");
  }

编辑 =>设置默认值，如果没有从自动完成中选择任何内容。
将 searchText 变量传递到模板中的保存功能，例如

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屋！