angularjs中的Datalist

Question

当我选择名称时，特定名称的描述应显示在div标签下方。请给我答案

 <input list="browsers" name="browser">
  <datalist id="browsers" >
   <option ng-repeat="state in result" value="{{state.name}}">
    </option>
    </datalist>

    <div></div>

我项目的Json：

{
     "states": [
         {
           "name":"Alabama","description":"Hi  iam from   ALabama","description1":"Hi it is from Alabama 2nd description"},
        {"name":"Alaska","description":"Hi  iam from  ALaska","description1":"Hi it is from Alaska  2nd description"}

           ]
 }

角度控制器：

     var app = angular.module('myApp', [])
        app.controller('statesCtrlr', [ '$scope', '$http',
       function($scope, $http) {
        var url = "json/countries.json";
        $http.get(url).success(function(response) {
            $scope.result = response.states;

            } ]);

Answer 1

HTML： -

<input list="browsers" name="browser">
<datalist id="browsers" >
   <option ng-repeat="state in result" value="{{state.name}} ng-click"="showDesc(state.name)">
</option>
</datalist>

<div>{description}</div>

控制器： -

var app = angular.module('myApp', [])
    app.controller('statesCtrlr', [ '$scope', '$http',
   function($scope, $http) {
    $scope.showDesc = function(name){
       // find description for selected state
       $scope.description = // selected state description.
    }
    var url = "json/countries.json";
    $http.get(url).success(function(response) {
        $scope.result = response.states;

        } ]);