Angularjs 未在JSFIDLE中调用的函数
似乎没有调用此JSFIDLE中的任何函数- 有验证功能和清除功能。所有验证都不起作用。例如,如果以“无效输入”的形式输入-20或aaa,则应显示其他错误消息。单击Clear按钮时,Clear()函数中的任何功能都不会触发。为什么这些函数不能在JSFIDLE中工作 以下是HTML:Angularjs 未在JSFIDLE中调用的函数,angularjs,jsfiddle,Angularjs,Jsfiddle,似乎没有调用此JSFIDLE中的任何函数- 有验证功能和清除功能。所有验证都不起作用。例如,如果以“无效输入”的形式输入-20或aaa,则应显示其他错误消息。单击Clear按钮时,Clear()函数中的任何功能都不会触发。为什么这些函数不能在JSFIDLE中工作 以下是HTML: <html ng-app="myApp"> <div ng-controller="formulaCtrlr" > <form name="vm.formContainer.form"
<html ng-app="myApp">
<div ng-controller="formulaCtrlr" >
<form name="vm.formContainer.form" autocomplete="off">
<div class="form-group" ng-class="{'has-error': vm.formContainer.form.FatA.$dirty && vm.formContainer.form.FatA.$invalid}">
<label for="FatA" class="col-sm-2 control-label">Fat A</label>
<input name="FatA" type="text" class="form-control col-sm-10 input-sm" ng-required="true" ng-model-options="{updateOn: 'blur'}" ui-validate="{numberCheck: 'vm.numberCheck($value)', fatRangeCheck: 'vm.fatRangeCheck($value)'}" ng-model="vm.formulaInput.Fats[0]" /><span>%</span>
<span class="error" ng-show="vm.formContainer.form.FatA.$dirty && vm.formContainer.form.FatA.$invalid">Invalid entry.</span>
<span class="error" ng-show="vm.formContainer.form.FatA.$dirty && vm.formContainer.form.FatA.$error.numberCheck">{{vm.errorMessages.numberCheck}}</span>
<span class="error" ng-show="vm.formContainer.form.FatA.$dirty && vm.formContainer.form.FatA.$error.fatRangeCheck">{{vm.errorMessages.fatRangeCheck}}</span>
</div>
<div class="form-group" ng-class="{'has-error': vm.formContainer.form.FatB.$dirty && vm.formContainer.form.FatB.$invalid}">
<label for="FatB" class="col-sm-2 control-label">Fat B</label>
<input name="FatB" type="text" class="form-control col-sm-10 input-sm" ng-required="true" ng-model-options="{updateOn: 'blur'}" ui-validate="{numberCheck: 'vm.numberCheck($value)', fatRangeCheck: 'vm.fatRangeCheck($value)'}" ng-model="vm.formulaInput.Fats[1]" /><span>%</span>
<span class="error" ng-show="vm.formContainer.form.FatB.$dirty && vm.formContainer.form.FatB.$invalid">Invalid entry.</span>
<span class="error" ng-show="vm.formContainer.form.FatB.$dirty && vm.formContainer.form.FatB.$error.numberCheck">{{vm.errorMessages.numberCheck}}</span>
<span class="error" ng-show="vm.formContainer.form.FatB.$dirty && vm.formContainer.form.FatB.$error.fatRangeCheck">{{vm.errorMessages.fatRangeCheck}}</span>
</div>
<div class="col-sm-offset-2">
<input type="reset" value="Clear" class="btn btn-default" ng-click="vm.clear()" ng-disabled="vm.formContainer.form.$pristine" />
</div>
</form>
<div>formula input: {{vm.formulaInput}}</div>
</div>
</html>
肥肉
%
无效条目。
{{vm.errorMessages.numberCheck}
{{vm.errorMessages.fatRangeCheck}
脂肪B
%
无效条目。
{{vm.errorMessages.numberCheck}
{{vm.errorMessages.fatRangeCheck}
公式输入:{vm.formulaInput}
以下是JS/Angular:
angular.module('myApp', [])
.controller("formulaCtrlr", ['$scope', function ($scope) {
var vm = this;
vm.formContainer = {
form: {}
}
vm.formulaInput = {};
vm.formulaInput.Fats = [];
vm.clear = function () {
vm.formulaInput = {};
vm.formulaInput.Fats = [];
vm.formContainer.form.$setPristine();
}
vm.errorMessages = {
numberCheck: 'Value must be a number.',
fatRangeCheck: 'Number must be between 0 and 100.'
}
vm.numberCheck = function (value) {
var result = !(isNaN(parseFloat(value)));
return result;
//return !(isNaN(parseFloat(value)));
}
vm.fatRangeCheck = function (value) {
var result = (value && value > 0.0 && value < 100.0);
return result;
//return (value && value > 0.0 && value < 100.0);
}
}]);
angular.module('myApp',[])
.controller(“formulaCtrlr”、[“$scope”、函数($scope){
var vm=这个;
vm.formContainer={
表格:{}
}
vm.formulaInput={};
vm.formulaInput.Fats=[];
vm.clear=函数(){
vm.formulaInput={};
vm.formulaInput.Fats=[];
vm.formContainer.form.$setPristine();
}
vm.errorMessages={
numberCheck:'值必须是数字',
fatRangeCheck:'数字必须介于0和100之间。'
}
vm.numberCheck=函数(值){
var result=!(isNaN(parseFloat(value));
返回结果;
//返回!(isNaN(parseFloat(value));
}
vm.fatRangeCheck=函数(值){
var结果=(值和值>0.0和值<100.0);
返回结果;
//返回值(值和值>0.0和值<100.0);
}
}]);
vm
用作controllerAs语法的作用域。你的例子中没有。把它写成:ng controller=“formulaCtrlr as vm”
@Aleksey Solovey,这使得clear函数起作用,但验证函数仍然不起作用。我只是指出了显而易见的问题。深入研究这个问题:您没有添加ui.validate
模块。添加脚本并通过注入扩展主模块:angular.module('myApp',['ui.validate'])
@AlekseySolovey很抱歉,我很愚蠢,但是如何添加脚本呢?jsidle有一个选项卡(在左侧)资源。插入所需脚本的一部分,然后按(+)
。或者,您可以通过将CDN放入
标记中手动执行此操作