这是使用Angular JS的简单计算器。 如果您先输入2个数字来计算（例如78-3），则该代码将执行基本数学运算，但是如果您添加单个数字（例如7- 3将显示7）。
第二个问题是我只能执行一次功能。要执行其他功能，我必须刷新页面，否则它将先前的信息保留在框中。
这是我的HTML和脚本：
<!DOCTYPE HTML>
<html ng-app="myCalc">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/calculator.css">
<script type="text/javascript" src="assets/angular.min.js"></script>
<script type="text/javascript" src="assets/calculator.js"></script>
<title>Calculator</title>
</head>
<body>
<form class="calc" ng-controller="calcController">
<p class="calc-display">
<input type="text" name="output" value="{{output}}" class="calc-display-
input">
</p>
<p class="calc-row">
<button type="button" class="calc-button" ng-click="updateOutput(7)" ng-
click="7">{{7}}</button>
<button type="button" class="calc-button" ng-click="updateOutput(8)" ng-
click="8">{{8}}</button>
<button type="button" class="calc-button" ng-click="updateOutput(9)" ng-
click="9">{{9}}</button>
<button type="button" class="calc-button" value="/" ng-
click='operate("/")' >/</button>
</p>
<p>
<button type="button" class="calc-button" ng-click="updateOutput(4)" ng-
click="4">{{4}}</button>
<button type="button" class="calc-button" ng-click="updateOutput(5)" ng-
click="5">{{5}}</button>
<button type="button" class="calc-button" ng-click="updateOutput(6)" ng-
click="6">{{6}}</button>
<button type="button" class="calc-button" ng-click='operate("*")'
>x</button>
</p>
<p>
<button type="button" class="calc-button" ng-click="updateOutput(1)" ng-
click="1">a = range(1,20)
</button>
<button type="button" class="calc-button" ng-click="updateOutput(2)" ng-
click="2">{{2}}</button>
<button type="button" class="calc-button" ng-click="updateOutput(3)" ng-
click="3">error message</button>
<button type="button" class="calc-button" ng-click='operate("-")' >-
</button>
<p>
<button type="button" class="calc-button" ng-click="updateOutput(0)" ng-
click="0">{{0}}</button>
<button type="button" class="calc-button" ng-click='output = 0'>C</button>
<button type="button" class="calc-button" ng-click="equal()">=</button>
<button type="button" class="calc-button" ng-click='operate("+")' >+
</button>
</p>
</form>
<script>
var myCalc = angular.module('myCalc',[]);
function calcController($scope) {
$scope.output = "0";
$scope.inOperation = false;
$scope.num1 = 0;
$scope.updateOutput = function(btn) {
if($scope.newNumber){
$scope.output = 0;
}
if($scope.output == "0" || $scope.newNumber) {
$scope.output = btn;
$scope.newNumber = false;
} else {
$scope.output += String(btn);
}
};
$scope.operate = function(op) {
if($scope.output && !$scope.inOperation){
$scope.num1 = $scope.output;
$scope.output += op;
$scope.inOperation = true;
}else if($scope.output.length > $scope.num1.length+1){
$scope.output = eval($scope.output);
$scope.output += op;
}
};
$scope.equal = function() {
if($scope.output.length > $scope.num1.length+1){
$scope.output = eval($scope.output);
$scope.num1 = $scope.output;
}else{
$scope.output = $scope.num1;
}
};
}
myCalc.controller('calcController', calcController);
</script>
</body>
答案 0 :(得分：0)
以下代码修复了您在问题中提到的两个问题。不过，您仍然需要根据自己的需求进行很多验证。
var myCalc = angular.module('myCalc', []);
function calcController($scope) {
$scope.output = 0;
$scope.pressed = false;
$scope.updateOutput = function(btn) {
if ($scope.pressed == false) {
$scope.output = btn;
$scope.pressed = true;
} else {
$scope.output += String(btn);
}
};
$scope.operate = function(op) {
$scope.pressed = true;
$scope.output += op;
};
$scope.equal = function() {
if ($scope.output.length > 2)
$scope.output = eval($scope.output);
$scope.pressed = false;
};
$scope.clear = function() {
$scope.pressed = false;
$scope.output = 0;
}
};
myCalc.controller('calcController', calcController);<!DOCTYPE HTML>
<html ng-app="myCalc">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.js"></script>
<title>Calculator</title>
</head>
<body>
<form class="calc" ng-controller="calcController">
<p class="calc-display">
<input type="text" name="output" ng-model="output" class="calc-display-
input">
</p>
<p class="calc-row">
<button type="button" class="calc-button" ng-click="updateOutput(7)" ng- click="7">{{7}}</button>
<button type="button" class="calc-button" ng-click="updateOutput(8)" ng- click="8">{{8}}</button>
<button type="button" class="calc-button" ng-click="updateOutput(9)" ng- click="9">{{9}}</button>
<button type="button" class="calc-button" ng-click='operate("/")'>/</button>
</p>
<p>
<button type="button" class="calc-button" ng-click="updateOutput(4)" ng- click="4">{{4}}</button>
<button type="button" class="calc-button" ng-click="updateOutput(5)" ng- click="5">{{5}}</button>
<button type="button" class="calc-button" ng-click="updateOutput(6)" ng- click="6">{{6}}</button>
<button type="button" class="calc-button" ng-click='operate("*")'>x</button>
</p>
<p>
<button type="button" class="calc-button" ng-click="updateOutput(1)" ng- click="1">import { ChangePasswordFacade, UserInformationFacade } from '@bis-angular/users';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { StoreModule, Store } from '@ngrx/store';
import { PasswordChangeModalComponent, PasswordChangeFormComponent } from '../../..';
import * as fromFeature from '@bis-angular/users';
import { ReactiveFormsModule } from '@angular/forms';
import { configureTestSuite } from 'ng-bullet';
import { DefaultPopoverComponent } from '@bis-angular/shared-components/pattern-library';
describe('PasswordChangeModalComponent', () => {
let component: PasswordChangeModalComponent;
let fixture: ComponentFixture<PasswordChangeModalComponent>;
let store: Store<fromFeature.ChangePasswordState>;
const childDefaultPopoverComponent = jasmine.createSpyObj('DefaultPopoverComponent', ['hideModal', 'showModal']);
const childPasswordChangeFormComponent = jasmine.createSpyObj('PasswordChangeFormComponent', ['setFormControlsToEmpty']);
configureTestSuite(() => {
TestBed.configureTestingModule({
imports: [
StoreModule.forRoot({}),
ReactiveFormsModule,
StoreModule.forFeature(fromFeature.CHANGEPASSWORD_FEATURE_KEY, fromFeature.changePasswordReducer, {
initialState: fromFeature.changePasswordInitialState
})
],
declarations: [PasswordChangeModalComponent, DefaultPopoverComponent, PasswordChangeFormComponent],
providers: [ChangePasswordFacade, UserInformationFacade]
});
});
beforeEach(() => {
store = TestBed.get(Store);
spyOn(store, 'dispatch').and.callThrough();
fixture = TestBed.createComponent(PasswordChangeModalComponent);
component = fixture.componentInstance;
component.defaultPopoverComponent = childDefaultPopoverComponent;
component.watchSuccessful = { unsubscribe: () => {} };
spyOn(component.watchSuccessful, 'unsubscribe');
fixture.detectChanges();
});
it('should be created', () => {
expect(component).toBeTruthy();
});
describe('showPasswordChangeModal function ', () => {
it('should call showModal and then hide if successful ', () => {
spyOn(component, 'hidePasswordChangeModal');
spyOn(component.changePasswordService, 'resetState');
const action = new fromFeature.ChangePasswordSuccessful({});
store.dispatch(action);
component.showPasswordChangeModal();
component.successful$.subscribe((successful: boolean) => {
expect(component.hidePasswordChangeModal).toHaveBeenCalled();
expect(component.changePasswordService.resetState).toHaveBeenCalled();
});
expect(childDefaultPopoverComponent.showModal).toHaveBeenCalled();
});
});
});
</button>
<button type="button" class="calc-button" ng-click="updateOutput(2)" ng- click="2">{{2}}</button>
<button type="button" class="calc-button" ng-click="updateOutput(3)" ng- click="3">{{3}}</button>
<button type="button" class="calc-button" ng-click='operate("-")'>-
</button>
<p>
<button type="button" class="calc-button" ng-click="updateOutput(0)" ng- click="0">{{0}}</button>
<button type="button" class="calc-button" ng-click="clear()">C</button>
<button type="button" class="calc-button" ng-click="equal()">=</button>
<button type="button" class="calc-button" ng-click='operate("+")'>+
</button>
</p>
</form>
</body>