Question

我想允许用户以他/她喜欢的方式订购地址格式。
为此，将有一个输入，用户可以在其中键入关键字和常规文本。
我们的想法是检测输入关键字的时间，然后从对象中提取该关键字，然后显示它。

这是对象：

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

指令应允许文本字段中的任何输入 - 但 - 当输入关键字作为＆＃39;值＆＃39;然后脚本应该从地址对象中获取 - 并显示它。

我正在努力实现这一点。

以下是我的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

任何帮助表示感谢。

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

Answer 2

要达到预期效果，请使用以下

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

Angular：从用户输入中提取关键字 - 并显示它

2 个答案: