Я хотел бы разрешить пользователю заказывать формат адреса в зависимости от того, какой он ему нравится.
Для этого будет введен вход, в который пользователь будет вводить как ключевые слова, так и обычный текст.
Идея состоит в том, чтобы определить, когда было введено ключевое слово, и извлечь это ключевое слово из объекта, а затем отобразить его.
Это объект:
$scope.address = {
"addressline1": "Street Name",
"addressline2": "City and County",
"addressline3": "12",
"country": "United Kingdom",
"postcode": "XE12 2CV"
}
Это разметка:
<input ng-model='value' placeholder="address1, address2, address3, address4" type="text" />
Директива должна допускать любой ввод в текстовом поле, но - когда ключевое слово вводится как "значение", тогда скрипт должен захватить это из адресного объекта - и отображать его.
Я изо всех сил пытаюсь это реализовать.
Ниже мой JS.
(function() {
'use strict';
angular.module('testApp', [])
.controller('testController', hotelController)
function hotelController($scope, $http) {
var vm = this;
$scope.address = {
"addressline1": "Street Name",
"addressline2": "City and County",
"addressline3": "12",
"country": "United Kingdom",
"postcode": "XE12 2CV"
}
var regexMobile = /addressline[0-9]*$/;
var match = regexMobile.exec($scope.address);
var result = '';
var startPoint = 1;
if (match !== null) {
for (var i = startPoint; i < match.length; i++) {
if (match[i] !== undefined) {
result = result + match[i];
}
}
$scope.value = result;
}
}
})()
Любая помощь оценивается.
Из вашего вопроса я понял, что вы пытаетесь отобразить метку на основе того, что пользователь вводит в textbox
.
Пример:
Типы пользователей: "addressline1", поэтому он должен отображать "Имя улицы".
Тогда, если я прав, приведенная ниже демо должна работать:
РЕДАКТИРОВАТЬ:
В соответствии с запросом автора эта версия редактирования показывает, как разделять элементы запятой, а затем отображать значения из соответствующих клавиш:
(function() {
angular
.module('testApp', [])
.controller('testController', hotelController);
hotelController.$inject = ['$scope'];
function hotelController($scope) {
$scope.address = {
"addressline1": "Street Name",
"addressline2": "City and County",
"addressline3": "12",
"country": "United Kingdom",
"postcode": "XE12 2CV"
}
$scope.change = function() {
$scope.label = "";
$scope.value.split(", ").forEach(function(value) {
for (var addressKey in $scope.address) {
if (addressKey == value) {
$scope.label += " " + $scope.address[addressKey];
}
}
})
}
}
})();
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body ng-controller="testController">
<section class='container'>
<h5>Type in keyword</h5>
<p>Custom directive which filters out keywords from an object and outputs them as text</p>
<input type="text" ng-model="value" placeholder="address1, address2, address3, address4" ng-change="change()">
<hr>
<span ng-bind="label"></span>
</section>
</body>
</html>
Чтобы достичь ожидаемого результата, используйте ниже
HTML:
<main data-ng-app='testApp'>
<section data-ng-controller='testController' class='container'>
<h5>Type in keyword</h6>
<p>Custom directive which filters out keywords from an object and outputs them as text</p>
<input ng-model='value' ng-keyup="test()" placeholder="address1, address2, address3, address4" type="text" />
<div ng-repeat="x in keys| filter:value" ng-show="value">
{{x}} : {{address[x]}}
</div>
</section>
</main>
JS:
(function() {
'use strict';
angular.module('testApp', [])
.controller('testController', hotelController)
function hotelController($scope, $http) {
var vm = this;
$scope.address = {
"addressline1": "Street Name",
"addressline2": "City and County",
"addressline3": "12",
"country": "United Kingdom",
"postcode": "XE12 2CV"
}
$scope.keys = Object.keys($scope.address);
$scope.test = function() {
$scope.result = $scope.address[$scope.value];
}
}
})()
Codepen- http://codepen.io/nagasai/pen/vKjJQV
controller-as-syntax
«controller-as-syntax
», нет необходимости внедрения$scope
. Также у вас есть код, который будет вызываться только при загрузке страницы, вам нужно что-то вродеngChange
чтобы добиться того, чего вы хотите.