How to insert an option using AngularJS

Question

I have a simple video tag that I would like to change the option on from autoplay to pause and back and forth.

HTML:

<video webkit-playsinline {{playa}} loop ng-src="{{keeper}}" style="width:100%;height:100%;border:0px solid red;border-radius:100px;z-index:1;">
</video>

Controller:

$scope.play = function () {
$scope.playa=autoplay;
}

$scope.pause = function () {
$scope.playa=pause;
}

I would have a two buttons, pause and play, to execute each function The above code does not work and I don't know why. Any help would be appreciated!

ERROR from web console:

Error: autoplay is not defined
@file:///Users/MehdiNathani/Desktop/Celebrity%20Fitness/Celebrity%20Fitness/www/js/controllers.js:661:3
invoke@file:///Users/MehdiNathani/Desktop/Celebrity%20Fitness/Celebrity%20Fitness/www/lib/ionic/js/ionic.bundle.js:13282:14
instantiate@file:///Users/MehdiNathani/Desktop/Celebrity%20Fitness/Celebrity%20Fitness/www/lib/ionic/js/ionic.bundle.js:13290:27
$ControllerProvider/this.$get</<@file:///Users/MehdiNathani/Desktop/Celebrity%20Fitness/Celebrity%20Fitness/www/lib/ionic/js/ionic.bundle.js:17846:18
self.appendViewElement@file:///Users/MehdiNathani/Desktop/Celebrity%20Fitness/Celebrity%20Fitness/www/lib/ionic/js/ionic.bundle.js:52338:24
ionicViewSwitcher.create/switcher.render@file:///Users/MehdiNathani/Desktop/Celebrity%20Fitness/Celebrity%20Fitness/www/lib/ionic/js/ionic.bundle.js:50456:29
ionicViewSwitcher.create/switcher.init@file:///Users/MehdiNathani/Desktop/Celebrity%20Fitness/Celebrity%20Fitness/www/lib/ionic/js/ionic.bundle.js:50376:11
self.render@file:///Users/MehdiNathani/Desktop/Celebrity%20Fitness/Celebrity%20Fitness/www/lib/ionic/js/ionic.bundle.js:52198:5
self.register@file:///Users/MehdiNathani/Desktop/Celebrity%20Fitness/Celebrity%20Fitness/www/lib/ionic/js/ionic.bundle.js:52156:5
updateView@file:///Users/MehdiNathani/Desktop/Celebrity%20Fitness/Celebrity%20Fitness/www/lib/ionic/js/ionic.bundle.js:57577:11
.compile/</<@file:///Users/MehdiNathani/Desktop/Celebrity%20Fitness/Celebrity%20Fitness/www/lib/ionic/js/ionic.bundle.js:57554:11
$RootScopeProvider/this.$get</Scope.prototype.$broadcast@file:///Users/MehdiNathani/Desktop/Celebrity%20Fitness/Celebrity%20Fitness/www/lib/ionic/js/ionic.bundle.js:24997:15
transitionTo/$state.transition<@file:///Users/MehdiNathani/Desktop/Celebrity%20Fitness/Celebrity%20Fitness/www/lib/ionic/js/ionic.bundle.js:44841:11
processQueue@file:///Users/MehdiNathani/Desktop/Celebrity%20Fitness/Celebrity%20Fitness/www/lib/ionic/js/ionic.bundle.js:23399:28
scheduleProcessQueue/<@file:///Users/MehdiNathani/Desktop/Celebrity%20Fitness/Celebrity%20Fitness/www/lib/ionic/js/ionic.bundle.js:23415:27
$RootScopeProvider/this.$get</Scope.prototype.$eval@file:///Users/MehdiNathani/Desktop/Celebrity%20Fitness/Celebrity%20Fitness/www/lib/ionic/js/ionic.bundle.js:24678:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@file:///Users/MehdiNathani/Desktop/Celebrity%20Fitness/Celebrity%20Fitness/www/lib/ionic/js/ionic.bundle.js:24489:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@file:///Users/MehdiNathani/Desktop/Celebrity%20Fitness/Celebrity%20Fitness/www/lib/ionic/js/ionic.bundle.js:24783:13
timeout/timeoutId<@file:///Users/MehdiNathani/Desktop/Celebrity%20Fitness/Celebrity%20Fitness/www/lib/ionic/js/ionic.bundle.js:26550:25
completeOutstandingRequest@file:///Users/MehdiNathani/Desktop/Celebrity%20Fitness/Celebrity%20Fitness/www/lib/ionic/js/ionic.bundle.js:14226:7
Browser/self.defer/timeoutId<@file:///Users/MehdiNathani/Desktop/Celebrity%20Fitness/Celebrity%20Fitness/www/lib/ionic/js/ionic.bundle.js:14498:7

Don't clarify things in comments. Update the question with any clarifications you have. — Dekel
– Dekel, Commented Dec 18, 2016 at 1:51
Are autoplay and pause supposed to be strings in your controller? — Soviut
– Soviut, Commented Dec 18, 2016 at 2:06
Provide a minimal reproducible example . if the code above is used then you would see errors thrown that pause and autoplay are undefined — charlietfl
– charlietfl, Commented Dec 18, 2016 at 2:17
@Soviut no not exactly...they should actually just be code...but I'm not sure how to store code or if that is even possible — MehdiN
– MehdiN, Commented Dec 18, 2016 at 5:51
@charlietfl I thought it was simple enough to not require an example...can you think of a workaround for this problem...i just need to toggle between autoplay and pause by the user clicking — MehdiN
– MehdiN, Commented Dec 18, 2016 at 5:53

Francesca · Accepted Answer · 2016-12-18 10:18:15Z

0

I don't know if it is possible, but in any case the error is that autoplay and pause are not defined. Now you are assigning to playa the value of autoplay, not the string autoplay. Maybe you would:

$scope.playa = 'autoplay';

and $scope.playa = 'pause';

answered Dec 18, 2016 at 10:18

Francesca

2482 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to insert an option using AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related