Я разработал сайт с Angularjs, и он отлично работает
У меня есть два автозаполнения, которые зависят друг от друга; первое автозаполнение для имени, второе для фамилии.
Я могу загрузить все опции в обоих автозаполнения.
Когда имя выбрано или изменено, я могу установить другое значение переменной, основываясь на привязанных к нему данных имени
Теперь я хочу, чтобы при выборе или изменении имени она меняла фамилию при автозаполнении выбранного элемента
но, к сожалению, выбранный элемент фамилии не изменился, когда я изменяю, переменная $ scope связывается с ним
Я использовал неправильный подход? Спасибо заранее, любая помощь приветствуется
вот HTML, для имени
<label class="block-display extra-small-label"><b>First Name *</b></label>
<div ng-controller="DemoCtrlFirstName as ctrlFirstName" layout="column" ng-cloak style="width: 90%;">
<md-content class="md-padding">
<form ng-submit="$event.preventDefault()">
<md-autocomplete
ng-disabled="ctrlFirstName.isDisabled"
md-no-cache="ctrlFirstName.noCache"
md-selected-item="ctrlFirstName.selectedItem"
md-search-text-change="ctrlFirstName.searchTextChange(ctrlFirstName.searchText)"
md-search-text="ctrlFirstName.searchText"
md-selected-item-change="ctrlFirstName.selectedItemChange(item)"
md-items="item in ctrlFirstName.querySearch(ctrlFirstName.searchText)"
md-item-text="item.display"
md-min-length="0"
placeholder=""
class="auto-name"
ng-model="ticket.FirstName" >
<md-item-template>
<span md-highlight-text="ctrlFirstName.searchText" md-highlight-flags="^i">{{item.display}}</span>
</md-item-template>
<md-not-found>
No member matching "{{ctrl.searchText}}" were found.
</md-not-found>
</md-autocomplete>
</form>
</md-content>
</div>
вот HTML, для фамилии
<label class="block-display extra-small-label"><b>Last Name *</b></label>
<div ng-controller="DemoCtrlLastName as ctrlLastName" layout="column" ng-cloak style="width: 90%;">
<md-content class="md-padding">
<form ng-submit="$event.preventDefault()">
<md-autocomplete
ng-disabled="ctrlLastName.isDisabled"
md-no-cache="ctrlLastName.noCache"
md-selected-item="ctrlLastName.selectedItem"
md-search-text-change="ctrlLastName.searchTextChange(ctrlctrlLastName.searchText)"
md-search-text="ctrlLastName.searchText"
md-selected-item-change="ctrlLastName.selectedItemChange(item)"
md-items="item in ctrlLastName.querySearch(ctrlctrlLastName.searchText)"
md-item-text="item.display"
md-min-length="0"
placeholder=""
ng-model="ticket.LastName" >
<md-item-template>
<span md-highlight-text="ctrlLastName.searchText" md-highlight-flags="^i">{{item.display}}</span>
</md-item-template>
<md-not-found>
No member matching "{{ctrlLastName.searchText}}" were found.
</md-not-found>
</md-autocomplete>
</form>
</md-content>
</div>
вот js, для имени
$scope.DemoCtrlFirstName = function ($timeout, $q, $log) {
var self = this;
self.simulateQuery = false;
self.isDisabled = false;
// list of `state` value/display objects
self.states = loadAll();
self.querySearch = querySearch;
self.selectedItemChange = selectedItemChange;
self.searchTextChange = searchTextChange;
self.selectedItem = $scope.ticket.FirstName;
self.newState = newState;
function newState(state) {
alert("Sorry! You'll need to create a Constitution for " + state + " first!");
}
// ******************************
// Internal methods
// ******************************
//
// Search for states... use $timeout to simulate
// remote dataservice call.
//
function querySearch (query) {
var results = query ? self.states.filter( createFilterFor(query) ) : self.states,
deferred;
//var deferred;
if (self.simulateQuery) {
deferred = $q.defer();
$timeout(function () { deferred.resolve( results ); }, Math.random() * 1000, false);
return deferred.promise;
} else {
return results;
}
}
function searchTextChange(text) {
//$log.info('Text changed to ' + text);
//$scope.ticket.FirstName = text;
$scope.ticket.FirstName = item.display;
$scope.ticket.LastName = item.last_name;
$scope.ticket.Email = item.email;
$scope.ticket.Mobile = item.mobile;
}
function selectedItemChange(item) {
//$log.info('Item changed to ' + JSON.stringify(item));
$scope.ticket.FirstName = item.display;
$scope.ticket.LastName = item.last_name;
$scope.ticket.Email = item.email;
$scope.ticket.Mobile = item.mobile;
console.log(item.id + " " + $scope.ticket.LastName);
/////////////////////////////////////////////////////////////////////////////////////////
//this line is what I mean to change the last name autocomplete selected value //
/////////////////////////////////////////////////////////////////////////////////////////
$scope.DemoCtrlLastName($timeout, $q, $log).editSelectedItem($scope.ticket.LastName);
//$scope.DemoCtrlLastName($timeout, $q, $log).selectedItem.value = $scope.ticket.LastName;
}
//
// Build `states` list of key/value pairs
//
function loadAll() {
$scope.results= [];
$scope.requestSearch = {
};
$$listing.memberSearchGetRequest($scope.requestSearch).then(function (resultSearch) {
angular.forEach(resultSearch.data.data, function(v, k){
//$scope.ticket.qtyVoucher += value.qty;
$scope.a = [];
$scope.a.value = v.first_name;
$scope.a.display = v.first_name;
$scope.a.id = v.id;
$scope.a.last_name = v.last_name;
$scope.a.email = v.user.email;
$scope.a.mobile = v.user.mobile;
$scope.results.push($scope.a);
//results.push($scope.results);
});
//console.log($scope.results);
//results = $scope.results;
}, function (error) {
$scope.isLoading = true;
console.log(error);
$scope.orderConfirmPostError = error;
toast.show('search is failed');
});
return $scope.results;
}
//
// Create filter function for a query string
//
function createFilterFor(query) {
var lowercaseQuery = query.toLowerCase();
return function filterFn(state) {
console.log(state.value.indexOf(lowercaseQuery) === 0);
return ( (state.value + "").indexOf(lowercaseQuery) === 0);
};
}
}
вот js, для фамилии
$scope.DemoCtrlLastName = function ($timeout, $q, $log) {
var self = this;
self.simulateQuery = false;
self.isDisabled = false;
// list of `state` value/display objects
self.states = loadAll();
self.querySearch = querySearch;
self.selectedItemChange = selectedItemChange;
self.searchTextChange = searchTextChange;
//self.selectedItem.value = $scope.ticket.LastName;
//self.selectedItem.display = $scope.ticket.LastName;
self.newState = newState;
function newState(state) {
alert("Sorry! You'll need to create a Constitution for " + state + " first!");
}
// ******************************
// Internal methods
// ******************************
/**
* Search for states... use $timeout to simulate
* remote dataservice call.
*/
function querySearch (query) {
var results = query ? self.states.filter( createFilterFor(query) ) : self.states,
deferred;
if (self.simulateQuery) {
deferred = $q.defer();
$timeout(function () { deferred.resolve( results ); }, Math.random() * 1000, false);
return deferred.promise;
} else {
return results;
}
}
function searchTextChange(text) {
//$log.info('Text changed to ' + text);
//$scope.ticket.FirstName = text;
}
function selectedItemChange(item) {
//$log.info('Item changed to ' + JSON.stringify(item));
$scope.ticket.LastName = item.display;
$scope.ticket.FirstName = item.first_name;
$scope.ticket.Email = item.email;
$scope.ticket.Mobile = item.mobile;
console.log(item.id);
}
/**
* Build `states` list of key/value pairs
*/
function loadAll() {
/*
var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
Wisconsin, Wyoming';
allStates = allStates.split(/, +/g).map( function (state) {
return {
value: state.toLowerCase(),
display: state
};
});
console.log(allStates);
return allStates;
*/
$scope.resultsLastName= [];
$scope.requestSearch = {
//"order_token": $scope.createBookingPostDataResult.data.order_token,
//"option": "confirmed",
//"first_name": query
};
$$listing.memberSearchGetRequest($scope.requestSearch).then(function (resultSearch) {
angular.forEach(resultSearch.data.data, function(v, k){
//$scope.ticket.qtyVoucher += value.qty;
$scope.a = [];
$scope.a.value = v.last_name;
$scope.a.display = v.last_name;
$scope.a.id = v.id;
$scope.a.first_name = v.first_name;
$scope.a.email = v.user.email;
$scope.a.phone = v.user.mobile;
$scope.resultsLastName.push($scope.a);
//results.push($scope.results);
});
//console.log($scope.resultsLastName);
//results = $scope.results;
}, function (error) {
$scope.isLoading = true;
console.log(error);
$scope.memberSearchGetError = error;
toast.show('search is failed');
});
return $scope.resultsLastName;
}
/**
* Create filter function for a query string
*/
function createFilterFor(query) {
var lowercaseQuery = query.toLowerCase();
return function filterFn(state) {
return (state.value.indexOf(lowercaseQuery) === 0);
};
}
function editSelectedItem(item) {
//self.selectedItem.value = $scope.ticket.LastName;
//self.selectedItem.display = $scope.ticket.LastName;
self.selectedItem = {
value: $scope.ticket.LastName,
display: $scope.ticket.LastName
};
}
}