问题描述
index.html:
<!DOCTYPE html><html><head> <meta charset='utf-8'> <meta name='viewport' content='initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width'> <title></title> <link href='https://www.6hehe.com/wenda/lib/ionic/css/ionic.css' rel='stylesheet'> <link href='https://www.6hehe.com/wenda/css/style.css' rel='stylesheet'> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href='https://www.6hehe.com/wenda/css/ionic.app.css' rel='stylesheet'> --> <!-- ionic/angularjs js --> <script src='https://www.6hehe.com/wenda/lib/ionic/js/ionic.bundle.js'></script> <!-- cordova script (this will be a 404 during development) --> <script src='https://www.6hehe.com/wenda/cordova.js'></script> <!-- your app’s js --> <script src='https://www.6hehe.com/wenda/js/app.js'></script> <script src='https://www.6hehe.com/wenda/js/calculatorCtrl.js'></script></head><body ng-app='calculator' ng-controller='calculatorCtrl'><ion-pane> <ion-header-bar class='bar-stable'> <h1 class='title'>个人所得税计算器</h1> </ion-header-bar> <ion-content> <h4>个人所得税：</h4> <form class='col'> <p class='list'><p class='item item-input item-select'> <p class='input-label'> 个人收入： </p> <select> <option>工资、薪金所得</option> <option>个体工商户生产、经营所得</option> <option>对企事业单位的承包经营</option> </select></p><p class='item item-input-inset'> <span>收入金额：</span> <label class='item-input-wrapper'> <input type='number' ng-model='shouru' name='shouru'> </label> <span>元</span></p><br><button ng-click='cal()'> 计算</button><button type='reset'> 重置</button> </p> <h4>计算结果</h4> <p class='item item-input-inset'><span>应缴税款： </span><label class='item-input-wrapper'> <input type='number' ng-model='yingjiao' disabled></label><span>元</span> </p> <p class='item item-input-inset'><span>税后收入： </span><label class='item-input-wrapper'> <input type='number' ng-model='shuihou' disabled></label><span>元</span> </p> </form> </ion-content></ion-pane></body></html>
calculatorCtrl.js:
angular.module(’calculator.controllers’, []) .controller('calculatorCtrl', function ($scope) { $scope.cal = function () { var left = $scope.shouru - 3500; if (left <= 1500) {yingjiao = left * 0.03; } else if (left <= 4500) {yingjiao = left * 0.1 - 105; } else if (left <= 9000) {yingjiao = left * 0.2 - 555; } else if (left <= 35000) {yingjiao = left * 0.25 - 1005; } else if (left <= 55000) {yingjiao = left * 0.3 - 2755; } else if (left <= 80000) {yingjiao = left * 0.35 - 5505; } else(left > 80000) {yingjiao = left * 0.45 - 13505; } $scope.shuihou = $scope.shouru - yingjiao; }; })
app.js:
angular.module(’calculator’, [’ionic’,’calculator.controllers’]).run(function($ionicPlatform) { $ionicPlatform.ready(function() { if(window.cordova && window.cordova.plugins.Keyboard) { // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs) cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); // Don’t remove this line unless you know what you are doing. It stops the viewport // from snapping when text inputs are focused. Ionic handles this internally for // a much nicer keyboard experience. cordova.plugins.Keyboard.disableScroll(true); } if(window.StatusBar) { StatusBar.styleDefault(); } });})
问题解答
回答1：Ng-app 和Ng-controller 不要放在一个元素上，另外你的问题是什么。用ionic start [project_name] blank 创建项目，然后在那个基础上改就好啦
