Question

我正在使用jQuery UI中的自动完成功能。我已经用Angularjs编写了一些代码来从字段中获取输入，并在该字段中写入产品名称时显示图像。

Html代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Products</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">


    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/voorraadoverzicht.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->


<script src= "//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>


    <script>
        $(function() {
            var availableTags = [
                "Coca Cola",
                    "Fanta",
                    "7 Up",
                    "Coca Cola Light",
            ];
            $("#tags").autocomplete({
                source: availableTags
            });
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="productsCtrl">

<div class="">
    <div class="overzicht-nav row nopadding">
        <div class="linkcontainer">
            <div class="col-xs-3 nav-link "><img src="images/icons/overzichtIcon.png"></div>
            <div class="col-xs-3 nav-link "><a href="addProduct.php"><img src="images/icons/addIcon.png"></a></div>
            <div class="col-xs-3 nav-link "><img src="images/icons/addIcon.png"></div>
            <div class="col-xs-3 nav-link  "><img src="images/icons/addIcon.png"></div>
        </div>
    </div>
</div>
<div class="ui-widget" >
    <label for="tags">name: </label>
    <input id="tags" ng-model="pname" >
      <img src="{{image()}}">
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('productsCtrl', function($scope,  $http) {
        $scope.pname = "";
        $scope.image = function() {
            for (var i=0; i < $scope.products.length; i++){
               if ($scope.products[i].name === $scope.pname){
                    return $scope.afbeelding = $scope.products[i].afbeelding;
                }
              }
        }
        $http.get('test.json').success(function(data) {
             $scope.products = data;
           });
    });
</script>

</body>
</html>

test.json：

[
  {
    "name": "Coca Cola",
    "afbeelding":"images/producten/frisdrank/cocacola.jpg"
  },
  {
    "name": "Fanta",
    "afbeelding":"images/producten/frisdrank/fanta.jpg"
  } 
]

当我在输入字段中键入Fanta时，它完全正常。但是当我从自动完成中选择芬达时，它并没有显示芬达图像。我是angularjs的新手，我想要一些建议/帮助。

选择自动完成输入时，angularjs功能不起作用

0 个答案: