Angular 在 TextBox 更改时触发
Angular to fire on TextBox change
我是 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);
}
您必须在输入中设置 ng-model 才能使用 ng-change,如果未定义,则会出现该错误。我使用变量名作为示例。
<input id="searchInput" type="text" ng-change="change()" ng-model="name"/>
我是 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);
}
您必须在输入中设置 ng-model 才能使用 ng-change,如果未定义,则会出现该错误。我使用变量名作为示例。
<input id="searchInput" type="text" ng-change="change()" ng-model="name"/>