Question

1）点击列表

2）在文本框中按Enter键。然后在控制台中它应该打印文本框值

以下是代码：

    <div ng-app="app">
      <form class="navbar-form navbar-left ng-scope" ng-submit="click(select)" ng-controller="one">
        <input ng-model="select">

            <ul class="datalist ng-pristine ng-valid" id="selectClientList" ng-model="getSelect" style="display: block; top: 42px; left: 15px; width: 195px; opacity: 1;">
<li class="ng-binding ng-scope">5 Takes</li>
<li class="ng-binding ng-scope">AP Trail Mix</li>
<li class="ng-binding ng-scope">AX</li><
li class="ng-binding ng-scope">Air New Zealand</li>
<li class="ng-binding ng-scope">American Legacy Foundation</li>
<li class="ng-binding ng-scope">Amway</li>
<li class="ng-binding ng-scope">Animal Planet Meerkats</li>
</ul>

          </form>
    </div>

CSS：

angular.module('app', [])
    .controller('one', function($scope) {
        $scope.click = function() {
            console.log($scope.select);
        }
    });


// from like query plugin

$("ul li").on("click", function(){
    $("input").val($(this).text());
});

Answer 1

您可以使用点击功能更新模型，如 -

angular.module('app', [])
    .controller('one', function($scope) {
        $scope.click = function() {
            console.log($scope.select);
        }
         $scope.change = function(value) {
           $scope.select=value
        }
    });

你的链接就像 -

<li class="ng-binding ng-scope" ng-click="change('5 Takes')">5 Takes</li>

Answer 2

有很多方法可以修复它，但我认为你的问题源于使用一些角度和jQuery的位。

如果您让Angular处理数据和更新DOM，而不是使用单独的函数来完成它，那么Angular的生活通常会更容易。

这是一个小提琴，我重写了你的代码，使用Angular绑定自动完成所有更新，所以你需要做的只是点击更新模型值：

https://jsfiddle.net/7q29ygmo/

所以jQuery函数现在只是

$scope.setSelect = function (item) {
        $scope.select = item;
    };

从列表中选择，文本框中的文本不会出现在ng-model中

2 个答案: