Angular - 在输入

Question

我想在Bootstrap的输入中使用Typeahead。我在$ scope.regions中获取信息和存储空间。这是我的代码：

myfile.js：

            $scope.selectedRegion = "";
            $scope.regions =  res.data.result;

以下是我元素的截图：

我想在输入中使用regionName作为typeahead。这是我输入的HTML代码：

<input placeholder="select region" class="form-control form-xs typeahead" ng-model="selectedRegion" typeahead="region for region in regions($viewValue)">

我想在列表中检查regionName，如下所示：

            <li ng-repeat="region in regions">
              <a href = "#"> {{ region.regionName }} </a>
            </li>
          </ul>

好吧，我可以看到列表的结果。但Typeahead不起作用，我的意思是输入下的typeahead框不会出现。有什么建议吗？

Answer 1

使用我在下面提到的类型。因为您需要单独获取regionName的值，并且无法解析typeahead中的对象。

<input placeholder="select region" class="form-control form-xs typeahead" ng-model="selectedRegion" typeahead="region.regionName for region in regions($viewValue)">

或者添加onselect函数来测试typeahead中的值。

Answer 2

您可以使用过滤器

 <input placeholder="select region" class="form-control form-xs typeahead" ng-model="selectedRegion" typeahead="region for region in regions | filter:$viewValue">

Answer 3

首先在控制器中创建一个函数（ex autocompleteRegions()），过滤数据并将其作为简单数组返回：

    // test if string start with prefix 
    function stringStartsWith (string, prefix) {
        var minl = ( prefix.length < string.length ) ? prefix.length : string.length ;
        return string.slice(0, minl) == prefix.slice(0, minl);
    }
    $scope.autocompleteRegions = function(value){
         var returnMe  = [];
         // find with regionName begin with "value"
         for(var i in $scope.regions){
             if(stringStartsWith($scope.regions[i]["regionName"],value){
                 returnMe.push(  $scope.regions[i]["regionName"] ) ;
             } 
         }
         return returnMe ;
    }

然后在输入打字头中调用此函数

     <input typeahead="item for item in autocompleteRegions($viewValue)">