Angular 在 TextBox 更改时触发

Question

我是 Angular 的新手，并试图弄清楚这一点。甚至可能有比我正在做的更好的方法来做到这一点。我愿意接受建议。

我有一个文本框，我想用它来调用服务“onChange”。

我有一个将更新的结果部分。本节使用模板。

为了代码清晰和其他原因，我正在尝试将 js 模板的使用与 Angular 结合起来。

我正在使用的代码（如下）正在产生类似于以下内容的错误：

错误：[$compile:ctreq] http://errors.angularjs.org/1.3.16/$compile/ctreq?p0=ngModel&p1=ngChange...等

这是主要的 HTML 部分：

<div ng-controller="SLTSearchController">
    <input id="searchInput" type="text" ng-change="change()" ng-model="searchInput" />
</div>
<div id="listContent"></div>

这是 HTML 模板：

<script id="brand-template" type="application/html-template">
    <div id="listContent" ng-controller="SLTSearchController">
        <div class="radioForm" ng-repeat="item in BrandNames">
            <div id="tier-checkCont-{{item.BrandId}}" ng-controller="SLTSearchController">
                <input name="{{item.BrandName}}" id="brand-{{item.BrandId}}" type="radio" value="{{item.BrandName}}" />
                <label id="tier-label-{{item.BrandId}}" for="{{item.BrandName}}">
                        {{item.BrandName}}
                </label>
             </div>
         </div>
     </div>
</script>

这是 JS：

var sltApp = angular.module('sltApp', []);

sltApp.controller('SLTSearchController', ['$scope', '$http', function ($scope, $http) {
    //$scope.searchInput //not sure what to do with this, if anything
    $scope.change = function () {
        $http.get('[link to web service]').
                success(function (data) {
                    alert('success');
                    $scope.BrandNames = data;
                    doresultswindowreplace();
                }).
                error(function () {
                    alert('fail');
                });
    };
}]);
    function doresultswindowreplace() {
        var resultstemplate = $('#brand-template').clone().html();

        $('#listContent').replaceWith(resultstemplate);
    }

Answer 1

您必须在输入中设置 ng-model 才能使用 ng-change，如果未定义，则会出现该错误。我用一个变量名作为例子。

<input id="searchInput" type="text" ng-change="change()" ng-model="name"/>