對象上的自動完成

我發現這個代碼可以像我想要的那樣工作，但我需要過濾對象上的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); 
     } 
    }); 
    }; 
});

來源

2017-03-13 user7704329

您可以使用引導typehead與推薦的方式角度，

DEMO

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", 
 
    }]; 
 
    });

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

來源

2017-03-13 17:38:13 Sajeetharan

是啊。我發現這個解決方案，它確實很好。但是，這個項目不能有引導。感謝您的建議。 – user7704329

我發現一對夫婦的問題與你的提琴，但可能會有一小部分錯字或什麼，因爲它沒有工作，直到我重新輸入一些東西。但我有一個簡化版本在這裏工作：http://jsfiddle.net/davi3blu3/d0zrohbg/2/

幾個註釋：控制器函數名稱與控制器指令'DefaultCtrl'與'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); 
     } 
    }); 
    }; 
});

來源

2017-03-13 19:38:24 davi3blu3

對象上的自動完成

回答

相關問題