在TextBox上更改角度

时间:2015-07-07 19:25:28

标签: jquery angularjs jquery-templates

我是Angular的新手并试图解决这个问题。甚至可能有一种比我正在做的更好的方法。我愿意接受建议。

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

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

我要做的是将js模板与Angular的结合用于代码清晰度和其他原因。

我正在使用的代码(如下所示)产生的错误类似于:

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

以下是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);
    }

1 个答案:

答案 0 :(得分:2)

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

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