Angular: извлечь ключевое слово из пользовательского ввода - и отобразить его

0

Я хотел бы разрешить пользователю заказывать формат адреса в зависимости от того, какой он ему нравится.
Для этого будет введен вход, в который пользователь будет вводить как ключевые слова, так и обычный текст.
Идея состоит в том, чтобы определить, когда было введено ключевое слово, и извлечь это ключевое слово из объекта, а затем отобразить его.

Это объект:

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

JSfiddle

Любая помощь оценивается.

  • 2
    Если вы используете controller-as-syntax « controller-as-syntax », нет необходимости внедрения $scope . Также у вас есть код, который будет вызываться только при загрузке страницы, вам нужно что-то вроде ngChange чтобы добиться того, чего вы хотите.
  • 0
    Антонио, вы пытаетесь отобразить значение по значению ключа? пример после ввода addressline1, должен вернуть право «Street Name»
Показать ещё 10 комментариев

2 ответа

1
Лучший ответ

Из вашего вопроса я понял, что вы пытаетесь отобразить метку на основе того, что пользователь вводит в 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>
  • 1
    ДА! Отлично спасибо :-)
  • 0
    Рад помочь :)
Показать ещё 1 комментарий
1

Чтобы достичь ожидаемого результата, используйте ниже

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

  • 0
    Чем это отличается от моего ответа?
  • 0
    @ developer033 я предоставлял разные возможности для достижения того же результата, мне нужно настроить dsplay, как и просил Антонио в своем комментарии
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню