Question

我发现这个代码的工作方式与我想要的一样，但我需要过滤对象的Name属性并在选中时显示对象属性。我分叉了这个。 http://jsfiddle.net/sebmade/swfjT/

我的尝试......那是行不通的。这可能很简单。永远都不是。欣赏其他眼睛来解决这个问题。 https://jsfiddle.net/lnbailey/7py3rbgh/2/

<div ng-app='MyModule'>
  <div ng-controller='autocompleteController'>
    <input auto-complete ui-items="trans" ng-model="selected"> Name = {{selected}}
    <div ng-repeat="name in names">
      <div ng-if="selected == name">
        {{selected.Name}}<br> 
        {{selected.Address}}<br>
        {{selected.City}} <br>
        {{selected.State}} <br>
        {{selected.Zip}}        
      </div>
    </div>
  </div

function DefaultCtrl($scope) {
  $scope.names = [{
    'id': 1,
    'Name': 'Transporter 1',
    'Address': '1 Transporter Address',
    'City': "Nashville",
    'State': 'TN',
    'Zip': "10001",
  }, {
    'id': 2,
    'Name': 'Transporter 2',
    'Address': '2 Transporter Address',
    'City': "Nashville",
    'State': 'TN',
    'Zip': "10001",
  }, {
    'id': 3,
    'Name': 'Transporter 3',
    'Address': '3 Transporter Address',
    'City': "Nashville",
    'State': 'TN',
    'Zip': "10001",
  }, {
    'id': 4,
    'Name': 'Transporter 4',
    'Address': '4 Transporter Address',
    'City': "Nashville",
    'State': 'TN',
    'Zip': "10001",
  }, {
    'id': 5,
    'Name': 'Transporter 5',
    'Address': '5 Transporter Address',
    'City': "Nashville",
    'State': 'TN',
    'Zip': "10001",
  }
  ];

  $scope.trans = [];
  angular.forEach($scope.names, function(name) {
    $scope.trans.push(name.first);
  });
};

angular.module('MyModule', []).directive('autoComplete', function($timeout) {
  return function(scope, iElement, iAttrs) {
    iElement.autocomplete({
      source: scope[iAttrs.uiItems],
      select: function() {
        $timeout(function() {
          iElement.trigger('input');
        }, 0);
      }
    });
  };
});

Answer 1

您可以按建议的方式使用带角度的bootstrap typehead，

<强>样本

＆＃13;

angular
  .module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap'])
  .controller('MainCtrl', function($scope, $http) {
    //ngModel value
    $scope.selected = undefined;
    //lookup values
    $scope.names = [{
      'id': 1,
      'Name': 'Transporter 1',
      'Address': '1 Transporter Address',
      'City': "Nashville",
      'State': 'TN',
      'Zip': "10001",
    }, {
      'id': 2,
      'Name': 'Transporter 2',
      'Address': '2 Transporter Address',
      'City': "Nashville",
      'State': 'TN',
      'Zip': "10001",
    }, {
      'id': 3,
      'Name': 'Transporter 3',
      'Address': '3 Transporter Address',
      'City': "Nashville",
      'State': 'TN',
      'Zip': "10001",
    }, {
      'id': 4,
      'Name': 'Transporter 4',
      'Address': '4 Transporter Address',
      'City': "Nashville",
      'State': 'TN',
      'Zip': "10001",
    }, {
      'id': 5,
      'Name': 'Transporter 5',
      'Address': '5 Transporter Address',
      'City': "Nashville",
      'State': 'TN',
      'Zip': "10001",
    }];
  });

＆＃13;

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div ng-controller="MainCtrl">
        <h4>Custom templates for results</h4>
        <pre>Model: {{selected | json}}</pre>
        <input type="text" ng-model="selected" uib-typeahead="country as country.Name for country in names | filter:{Name:$viewValue}" class="form-control" typeahead-show-hint="true" typeahead-min-length="0">
    </div>
  </body>
</html>

＆＃13;

Answer 2

我发现了一些与你的小提琴有关的问题，但可能有一个小错字或其他东西，因为它在我重新输入一些东西之前不起作用。但我在这里有一个简化版本：http://jsfiddle.net/davi3blu3/d0zrohbg/2/

几点说明：控制器函数名称与控制器指令“DefaultCtrl”vs“autocompleteController”不匹配。

在你的ng-repeat中，有{{selected.Name}}这是你输入的值，而不是引用$ scope中的数组。已更改为{{name.Name}}。

我更幸运使用'ng-show'而不是'ng-if'。

我在ng-repeat中添加了一个过滤器，以便在键入时使用搜索词。

希望这有用！

HTML：

<div ng-app='MyModule'>
<div ng-controller='DefaultCtrl'>

    <input auto-complete ui-items="names" ng-model="selected">
    Name = {{selected}}

    <div ng-repeat="name in names | filter:selected">
        <p>{{name.name}}</p>
        <p>{{name.city}}</p>  
        <p>{{name.state}}</p>  
    </div>

</div>

JS：

function DefaultCtrl($scope) {
$scope.names = [
    {
    "name": "andrea",
    "city": "louisville",
    "state": "ky"
  },
  {
    "name": "bill",
    "city": "cleveland",
    "state": "oh"
  },
  {
    "name": "charlie",
    "city": "nashville",
    "state": "tn"
  },
  {
    "name": "daniel",
    "city": "boston",
    "state": "ma"
  },
  {
    "name": "elizabeth",
    "city": "philadelphia",
    "state": "pa"
  },
  {
    "name": "francis",
    "city": "alexandria",
    "state": "va"
  },
  {
    "name": "greg",
    "city": "lexington",
    "state": "ky"
  }
    ];
}

angular.module('MyModule', []).directive('autoComplete', function($timeout) {
  return function(scope, iElement, iAttrs) {
    iElement.autocomplete({
      source: scope[iAttrs.uiItems],
      select: function() {
        $timeout(function() {
          iElement.trigger('input');
        }, 0);
      }
    });
  };
});

对象自动完成

2 个答案: