I am using Ionic 1.3.3. I want to add an action event to the slides, but the event doesn't fire at all. Nothing is appearing in the console for the following:
template:
<ion-slides options="options" slider="data.slider">
<ion-slide-page ng-repeat="profile in home.profiles">
<div class="card image">
<div id="container-{{profile.$id}}"></div>
</div>
<div class="item">
<h2>{{profile.displayName}}, {{profile.age}} (<i class="ion-heart"></i> {{profile.stars}})</h2>
</div>
</ion-slide-page>
</ion-slides>
controller:
app.controller('HomeCtrl', function (Auth, $ionicLoading, $scope, $ionicSlideBoxDelegate) {
var home = this;
$scope.options = {
loop: false,
speed: 800,
pagination: false,
};
$scope.$on('$ionicSlides.sliderInitialized', function (event, data) {
// data.slider is the instance of Swiper
console.log('initialized');
$scope.slider = data.slider;
});
$scope.$on('$ionicSlides.slideChangeStart', function (event, data) {
console.log('Slide change is beginning');
});
$scope.$on('$ionicSlides.slideChangeEnd', function (event, data) {
// note: the indexes are 0-based
console.log('Slide change ended');
$scope.activeIndex = data.slider.activeIndex;
$scope.previousIndex = data.slider.previousIndex;
});
});
I copy-pasted most of this from the ionic v1 docs. What am I missing?
Related
I have a form, which has a vue componenet that allows users to create additional input lines in the form.
I am having an issue getting all of these input lines to submit for the axios request, currently it only outputs the last added rows input.
Typically, in a normal PHP form, I would just make the field an array (name="MultiRow[]"), however I am lost at doing this in Vue and struggling to find any doc that covers this.
Here is the component in my form:
<div class="mt-5 md:mt-0 md:col-span-2">
<fieldset class="mt-6">
<div class="mt-6">
<response-set-input v-model="fields.response"></response-set-input>
</div>
</fieldset>
</div>
Here is my Vue File for form submission:
<script>
import Switch from '../../components/StatusToggle';
export default {
data() {
return {
fields: {},
errors: {},
statusToggle: false,
}
},
methods: {
toggled(toggleOn){
statusToggle: toggleOn
},
submit() {
this.errors = {};
axios.post('/submit', this.fields).then(response => {
alert('Message sent!');
}).catch(error => {
if (error.response.status === 422) {
this.errors = error.response.data.errors || {};
}
});
},
},
components: {
statusToggle: Switch
}
}
</script>
Here is my component code:
<template>
<div>
<div class="m-2" v-for="(row, index) in rows" :key="index">
<div class="col-span-12 sm:col-span-3 mb-1">
<label for="responseTitle" class="block text-sm font-medium leading-5 text-gray-700">Response</label>
<input
id="responseTitle"
class="mt-1 form-input block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5"
type="text"
name="fields.response[]"
:value="responseInput"
#input="onInput($event.target.value)"/>
</div>
<div class="mt-2">
<button type="button" class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs leading-4 font-medium rounded text-gray-700 bg-green-100 hover:bg-indigo-50 focus:outline-none focus:border-indigo-300 focus:shadow-outline-indigo active:bg-indigo-200 transition ease-in-out duration-150" #click="addRow">
Add new Response
</button>
<button type="button" class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs leading-4 font-medium rounded text-gray-700 bg-red-100 hover:bg-indigo-50 focus:outline-none focus:border-indigo-300 focus:shadow-outline-indigo active:bg-indigo-200 transition ease-in-out duration-150" #click="removeRow(index)">
Remove
</button>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['responseInput'],
data () {
return {
rows: [],
stopRemoval: true,
}
},
watch: {
rows () {
this.stopRemoval = this.rows.length <= 1
}
},
methods: {
onInput(responseInput){
this.$emit('input', responseInput),
console.log(responseInput)
},
addRow () {
let checkEmptyRows = this.rows.filter(row => row.number === null)
if (checkEmptyRows.length >= 1 && this.rows.length > 0) {
return
}
this.rows.push({
responseTitle: null,
})
},
removeRow (rowId) {
if (!this.stopRemoval) {
this.rows.splice(rowId, 1)
}
}
},
mounted () {
this.addRow()
}
}
</script>
How do I submit the multiple rows to the form submission with Vue?
There's a decent amount wrong with your code, I suggest that you read the documentation.
Just to name a few things:
You shouldn't update a prop in a component as it will get overridden when the parent updates, props: ['responseInput'], and :value="responseInput"
You're not passing any prop called responseInput, v-model passes a prop called value.
Vue is only reactive on properties that processed during instance initialisation and that means it doesn't know about response on fields: {},
You're using rows (which is good), but then you're only emitting the prop you passed in responseInput. I think :value="responseInput" is supposed to be :value="row"
I am trying to modify an ionic 1 project where I need to dynamically change the text on a tempate when it opens.
In the controller.js I have:
//Settings
$scope.settingsData = {};
$ionicModal.fromTemplateUrl('templates/settings.html', {
scope: $scope
}).then(function(modal) {
$scope.modal2 = modal;
});
$scope.closeSettings = function() {
$scope.modal2.hide();
};
$scope.settings = function() {
$scope.modal2.show();
};
$scope.doSettings = function() {
console.log('Doing Settings', $scope.settingsData);
$timeout(function() {
$scope.closeSettings();
}, 1000);
};
The template looks like this:
<ion-modal-view>
<ion-header-bar>
<h1 class="title">App Settings</h1>
<div class="buttons">
<button class="button button-clear" ng-click="closeSettings()">Close</button>
</div>
</ion-header-bar>
<div id="myid">Text in here needs to be replaced with something when it opens</div>
</div>
</ion-content>
</ion-modal-view>
So if I have a variable:
var myvar = 'Something to replace';
Then when the template opens the var above could be the text in div myid which is in the template
How can this be done?
i'll try to answer your question.
in your controller :
$scope.myvar = 'new text here !';
in your html file :
<div id="myid">{{myvar}}</div>
How i can send data between controllers AngularJS in my occasion?
I wanna send result of scanned qr code into things[] and,of course, show it.
I'm beginner in AngularJS and JavaScript and making this program just for me
App.js:
var MKscanner = angular.module('starter', ['ionic', 'ngCordova', 'ngStorage'])
MKscanner.controller('scanBarCtrl', function($scope, $cordovaBarcodeScanner) {
$scope.input ={
MyText : ''
};
$scope.scanBarcode = function() {
$cordovaBarcodeScanner.scan(
{
preferFrontCamera : false,
orientation : 'portrait'
}).then(function (result) {
alert(result.text);
},
function (error) {
alert('Scanning failed: ' + error);
});
};
});
MKscanner.factory ('StorageService', function ($localStorage) {
$localStorage = $localStorage.$default({
things: []
});
var _getAll = function () {
return $localStorage.things;
};
var _add = function (thing) {
$localStorage.things.push(thing);
}
var _remove = function (thing) {
$localStorage.things.splice($localStorage.things.indexOf(thing), 1);
}
return {
getAll: _getAll,
add: _add,
remove: _remove
};
});
MKscanner.controller( 'MainCtrl', function ($scope, StorageService) {
$scope.things = StorageService.getAll();
$scope.add = function (newThing) {
StorageService.add(newThing);
};
$scope.remove = function (thing) {
StorageService.remove(thing);
};
});
<div ng-controller="MainCtrl">
<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="Save your own text" ng-model="newThing">
</label>
<button class="button button-clear button-positive icon" ng-click="add(newThing)">
<i class="ion-ios-plus-outline"></i> Add
</button>
</div>
</div>
<ion-list show-delete="false" can-swipe="true">
<ion-item ng-repeat="thing in things">
{{thing}}
<ion-option-button class="button-assertive ion-trash-b" ng-click="remove(thing)"></ion-option-button>
</ion-item>
</ion-list>
</div>
You can share data between controllers using $emit and $broadcast :
These events can be used to send data as well, The classic example is given below. You can share data any controller in the app.
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="sendData();"></button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
function sendData($scope) {
var arrayData = [1,2,3];
$scope.$emit('someEvent', arrayData);
}
});
app.controller('yourCtrl', function($scope, $http) {
$scope.$on('someEvent', function(event, data) {
console.log(data);
});
});
</script>
My Vue component to display a modal is like this :
<template>
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
...
<a href="javascript:">
<img v-if="image == ''" :src="'https://myshop.co.id/img/no-image.jpg'" alt="" class="img-responsive">
<img v-else :src="image" alt="" class="img-responsive" />
</a>
...
<input type="file" v-on:change="changeImage">
...
</div>
</div>
</div>
</template>
<script>
export default{
...
data() {
return {
image: '',
...
}
},
methods: {
changeImage($event) {
const selectedImage = $event.target.files[0]
const form = new FormData();
form.append('file', selectedImage);
// define the done handler
const onDone = (data) => {
if (!$.trim(data)) {
alert('No response');
}
else {
var files = $event.target.files || $event.dataTransfer.files
if (!files.length)
return;
this.createImage(files[0])
this.imageChanged = data
this.disabled = 0
}
}
// define th post options
const options = {
url: window.Laravel.baseUrl+'/product/addImage',
type: "POST",
data: form,
enctype: 'multipart/form-data',
processData: false, // tell jQuery not to process the data
contentType: false // tell jQuery not to set contentType
}
// submit the image
$.ajax(options).done(onDone);
},
createImage(file) {
var image = new Image()
var reader = new FileReader()
var vm = this
reader.onload = (e) => {
vm.image = e.target.result
};
reader.readAsDataURL(file)
},
}
}
</script>
When the modal shows, it will display a file input.
If I upload image using the file input, it will display that image in the HTML.
When I close the modal and re-open it, the image is still displayed.
I want to reset the input data in the modal so that when I open the modal again, the image will disappear.
How can I do it?
Set this.image='' when the modal closes.
In bootstrap you can do this automatically when the modal closes by listening to the hidden.bs.modal event. You can clear file inputs by setting their value to null.
Add a ref attribute to your modal
<div ref="modal" class="modal" tabindex="-1" role="dialog">
...
<input ref="imageInput" type="file" v-on:change="changeImage">
And add code to listen to the event.
mounted(){
$(this.$refs.modal).on('hidden.bs.modal', () => {
this.image = ''
this.$refs.imageInput.value = null
})
}
This maybe a somewhat straightforward question but I'm looking to change an old Vue.directives into a Vue.component and am still pretty new to the Vue world. I can't seem to get Tinymce to work within a component and I am open to any and all suggestions.
<div id="tinymce-form">
<textarea
id="editor"
rows="10"
v-tinymce-editor="content">
{{content}}
</textarea>
Html: {{content}}<br />
Markdown: {{ content | markdown}}
</div>
Vue.directive('tinymce-editor',{
twoWay: true,
bind: function() {
var vm = this;
tinymce.init({
selector: '#editor',
setup: function(editor) {
editor.on('init', function() {
tinymce.get('editor').setContent(vm.value);
});
editor.on('keyup', function() {
var new_value = tinymce.get('editor').getContent(vm.value);
vm.set(new_value)
});
}
});
}
})
Vue.filter('markdown', function(value){
return toMarkdown(value);
})
new Vue({
el: 'body',
data: {
content: 'Editable Text Goes Here',
}
})