代码之家 › 专栏 › 技术社区 › its me

当我们提交表单时,没有找到传递旧值的md autocomplete?

angularjs jquery javascript

its me · 技术社区 · 6 年前

如果我开始在“自动完成”字段中输入未列出的值,那么我确实提交了我应该得到我在“自动完成”字段中输入的值,我该怎么做

启动类型Mobilesss并提交,我们将得到相同的值{type:“Mobile”,value:“2400”}

但我的期望是,当我们提交时,自动完成中会出现什么?当我们提交时,我应该进入控制台

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>

1 回复 | 直到 6 年前

-1

georgeawg 6 年前

当您从自动完成建议中选择任何项目时,它将触发 selectedItemChange save 功能。

所以,如果您第一次从建议中选择任何项目,它将触发功能和更新 $scope.data , 选择EditemChange ,因此$范围.数据以前更新的值不更新,现在提交表单,记录以前的值$范围.数据在控制台中。

如果您只想更新(覆盖)的值$范围.数据,每次更改AutoCompleteSelection时,请尝试以下操作

$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 变量转换为模板中的save函数,如

ng-submit="save(searchText)"

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

$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>