[英]AngularJS ngclick Toggle function call
Trying to toggle a button with start and stop functions. 尝试切换具有启动和停止功能的按钮。
heres the controller 继承人
App.controller('LogPhoneMainController',
function LogPhoneMainController($scope) {
var self = this;
$scope.header = "Log a phone call";
$scope.stopwatches = [{ log: [] }, { interval: 1000, log: [] }, { interval: 2000, log: [] }];
});
App.filter('stopwatchTime', function () {
return function (input) {
if(input){
var elapsed = input.getTime();
var hours = parseInt(elapsed / 3600000,10);
elapsed %= 3600000;
var mins = parseInt(elapsed / 60000,10);
elapsed %= 60000;
var secs = parseInt(elapsed / 1000,10);
var ms = elapsed % 1000;
return hours + ':' + mins + ':' + secs + ':' + ms;
}
};
})
.directive('bbStopwatch', ['StopwatchFactory', function(StopwatchFactory){
return {
restrict: 'EA',
scope: true,
link: function(scope, elem, attrs){
var stopwatchService = new StopwatchFactory(scope[attrs.options]);
scope.startTimer = stopwatchService.startTimer;
scope.stopTimer = stopwatchService.stopTimer;
scope.resetTimer = stopwatchService.resetTimer;
}
};
}])
.factory('StopwatchFactory', ['$interval', function($interval){
return function(options){
var startTime = 0,
currentTime = null,
offset = 0,
interval = null,
self = this;
if(!options.interval){
options.interval = 100;
}
options.elapsedTime = new Date(0);
self.running = false;
function pushToLog(lap){
if(options.log !== undefined){
options.log.push(lap);
}
}
self.updateTime = function(){
currentTime = new Date().getTime();
var timeElapsed = offset + (currentTime - startTime);
options.elapsedTime.setTime(timeElapsed);
};
self.startTimer = function(){
if(self.running === false){
startTime = new Date().getTime();
interval = $interval(self.updateTime,options.interval);
self.running = true;
}
};
self.stopTimer = function(){
if( self.running === false) {
return;
}
self.updateTime();
offset = offset + currentTime - startTime;
pushToLog(currentTime - startTime);
$interval.cancel(interval);
self.running = false;
};
self.resetTimer = function(){
startTime = new Date().getTime();
options.elapsedTime.setTime(0);
timeElapsed = offset = 0;
};
self.cancelTimer = function(){
$interval.cancel(interval);
};
return self;
};
}]);
heres my html. 这是我的html。
<div class="container">
<div class="row">
<div ng-controller="LogPhoneMainController" ng-init="init()">
<h2>{{header}}</h2>
<div ng-repeat="options in stopwatches|limitTo:1">
<div bb-stopwatch options="options">
<div class="container">
<div class="stopWatch numbers">
{{options.elapsedTime | stopwatchTime}}
</div>
<button class="btn" ng-click="startTimer()">start</button>
<button class="btn" ng-click="stopTimer()">stop</button>
</div>
</div>
</div>
<div ng-view>
</div>
</div>
</div>
</div>
I want the only one btn, and ngclick needs to toggle which function it calls and display iether start or stop accordingly. 我只需要一个btn,并且ngclick需要切换它调用的函数并相应地显示iether开始或停止。
UPDATE: 更新:
i tried 我试过了
$scope.startStop = "";
lives in controller and below is in my factory 住在控制器中,下面是我的工厂
self.startStopTimer = function (startStop) {
if (startStop === "Start") {
startTimer();
$scope.startStop = "Stop";
} else {
stopTimer();
$scope.startStop = "Start";
}
};
i put that code in my controller, and the html button looks like this 我将代码放在控制器中,并且html按钮如下所示
<button class="btn" ng-click="startStopTimer()">
{{startStop}}
</button>
but i get scope not defined(edit: i get startStop undefined due to where the function lives) 但是我没有定义范围(编辑:由于功能所在,我没有定义startStop)
如果一切正常,并且您只想显示一个按钮,请尝试以下操作:
<button class="btn" ng-click="running?stopTimer():startTimer()">{{running?'stop':'start'}}</button>
<button class="btn" ng-click="startTimer(toggleBtn)">{{btn.value}}</button>
and inside the function call toggle the toggleBtn ($scope.toggleBtn = !$scope.toggleBtn) so if parameter is true startTimer() or if false stopTimer() will get executed 并在函数调用内切换toggleBtn($ scope.toggleBtn =!$ scope.toggleBtn),因此,如果参数为true,则执行startTimer()或为false,则执行stopTimer()
or simpler one 或更简单的一个
You can either use ng-show/ng-hide or ng-if toggle the button with a variable like 您可以使用ng-show / ng-hide或ng-if使用类似以下变量的按钮切换按钮
<button class="btn" ng-click="toggleBtn = !toggleBtn ; startTimer()" ng-if="toggleBtn">start</button>
<button class="btn" ng-click="toggleBtn = !toggleBtn ; stopTimer()" ng-if="!toggleBtn">stop</button>
$scope.toggleBtm should be true when u want the start button. 当您想要开始按钮时,$ scope.toggleBtm应该为true。
implement the toggle logic in the controller and set the button text withing the controller. 在控制器中实现切换逻辑,并随控制器一起设置按钮文本。
<button class="btn" ng-click="startStopTimer()">{{startStop}}</button>
in the controller implement only one function startStopTimer
and based on the value of startStop
toggle the text in the button. 在控制器中仅实现一种功能startStopTimer
和基于价值startStop
切换的按钮上的文本。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.