我的html5应用程序无法显示模型

My html5 app fail to display model

本文关键字：显示模型 html5 应用程序我的更新时间：2023-09-26

我正在使用angularJS做一些自定义过滤工作，但它在第一阶段未能显示模型信息。

<html lang="en" data-ng-app="myApp">
<Head>
    <title>Custom filter</title>
    <meta charset="utf-8">
</head> 
<body>   
<div data-ng-init="varNum=0">
    <p>
        <label for="number">Enter number from 1 to 99:</label>
        <input type="number" data-ng-model="varNum" id="number"/>
    </p>
    <p>Your number: {{ varNum }}</p>
</div> 
<script src="js/angular.min.js"></script>
<script src="js/appromannumber.js"></script>
</body>   
</html>

近似号.js

var app = angular.module("myApp", []);
app.filter("myFilter", function (){
    return function(myNum) {
        var formatedNumber = "";
        switch(myNum) {
             0:formatedNumber="zero";break;    
        return formatedNumber;
        }
    });

但如果我删除ng app的值，比如data ng app="，它将开始显示varNum。我不知道为什么会发生这种事

如果没有引导模块，就意味着没有ng-app="moduleName"，就不应该以角度工作。我怀疑你错过了其他东西，我在下面提到了你的代码中的一些问题，这可能会帮助你

在你的过滤器中，你错过了

switch语句中的case。需要case 0:而不是0:...

return formatedNumber;无法访问此语句。应在switch语句后使用

你可以试试：

app.filter("myFilter", function (){
    return function(myNum) {
        var formatedNumber = "";
        switch(myNum) {
             case 0:formatedNumber="zero";break; 
             case 1:formatedNumber="One";break; 
        }
        return formatedNumber;
    };
});

以及在html:中

<div data-ng-init="varNum=0">
    <p>
        <label for="number">Enter number from 1 to 99:</label>
        <input type="number" data-ng-model="varNum" id="number"/>
    </p>
    <p>Your number: {{ varNum | myFilter }}</p> // shown filtered value
</div>