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>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
