Develop Reference

Dropzone inside Vue transition modal doesn´t work

i have a dropzone function in mounted function, it works fine when in the view the dropzone is outside of a modal, but in transition modal doesn´t work, any idea or solution for this?
this is .ftl
...
<transition name="modal" id="deletemo">
<div v-if="uploadModal" >
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">upload file</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" #click="uploadModal = false">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>select file type</label>
<multiselect placeholder="Seleccione tipo de fichero" v-model="fileTypeSelected" :options="fileTypelist" > </multiselect>
</div>
<div class="form-group">
<div class="animated fadeIn">
<div class="card">
<div class="card-body">
<div id="uploadFile" class="dropzone col" style="border-style: dashed;">
<div class="dz-message" data-dz-message>
<div>upload file here ...</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" #click="uploadModal = false">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</transition>
.js
mounted: function () {
var vue = this;
dropzone.autoDiscover = false;
$("div#uploadFile").dropzone({
url: "/demo/uploadFile"
,acceptedFiles: ".pdf"
,clickable: false
,maxFilesize: 100
,addRemoveLinks: true
,init: function() {
this.on('success', function(file, json) {
});
this.on('addedfile', function(file) {
});
this.on("sending", function(file, xhr, formData) {
formData.append("nif", vue.filePerson);
});
this.on("complete", function(file) {
//this.removeFile(file);
});
}
});
}
});
I was looking for other similar post but not for a transition , so it does not work for me.
thanks in advance.

After trying multiple things i found the solution using an attribute "v-on:enter="enter" in transition and inside function initialize dropzone.
<transition name="modal" v-on:enter="enter" >
......
</transition>
enter: function () {
$("div#uploadFile").dropzone({
url: "/demo/uploadFile"
......
});
},

I have experienced the same issue. I this the problem is mostly the v-if div:
<div **v-if=**"uploadModal" >
<div id="uploadFile" class="dropzone col" style="border-style: dashed;">
<div class="dz-message" data-dz-message>
<div>upload file here ...</div>
</div>
</div>
</div>
VueJS seems to take control of everything happening there, to enable the dropzone, you will need to use #click or something to that effect. We just need to create the method that will be responsible for opening the FileInput:
methods: {
openDropZone() {
const dropzone = Dropzone.options.myDropzone = {
url: "http://localhost:8000/upload",
maxFiles : 2,
addRemoveLinks: true,
headers: {
"X-CSRFToken": "{{ csrf_token }}",
},
};
dropzone.hiddenInputFile.click();
}
}
Then we call the openDropZone() method from #click:
<div v-if="uploadModal" >
<div id="uploadFile" **#click="openDropZone()"** class="dropzone col" style="border-style: dashed;">
<div class="dz-message" data-dz-message>
<div>upload file here ...</div>
</div>
</div>
</div>

How Slice text and add Read More button in v-for loop

In the "card-text" class it calls the text from the Json file but it is too long I would like to cut the text and add actions click on the "Read More" button but for only the clicked card to react, someone something ?
<template>
<div class="container">
<Modal
v-if="showModal && GET_TRAILER.payload !== null"
v-on:close="closeModal"
:trailerAdress="GET_TRAILER.payload"
></Modal>
<div>
<div class="row" v-for="(obj,index) in GET_MOVIE" :key="index">
<div class="card col-12 col-lg-3" style="width: 10rem;" v-for="movie in obj.payload" :key="movie.id">
<img class="card-img-top" :src="`https://image.tmdb.org/t/p/w500${movie.poster_path}`" />
<div class="card-body">
<h5 class="card-title">{{movie.original_title}}</h5>
<p class="card-text">
{{movie.overview}}
</p>
<div class="buttonPosition">
<button
v-on:click="OpenTrailerModal(movie.id)"
type="button"
class="btn btn-success"
>Watch Trailer</button>
</div>
</div>
</div>
</div>
</div>
<button #click="MoreMovies" type="button" class="btn btn-warning moreBtn">Load More Movies</button>
</div>
</template>

Try this below :
<template>
<div class="container">
<Modal
v-if="showModal && GET_TRAILER.payload !== null"
v-on:close="closeModal"
:trailerAdress="GET_TRAILER.payload"
></Modal>
<div>
<div class="row" v-for="(obj,index) in GET_MOVIE" :key="index">
<div class="card col-12 col-lg-3" style="width: 10rem;" v-for="movie in obj.payload" :key="movie.id">
<img class="card-img-top" :src="`https://image.tmdb.org/t/p/w500${movie.poster_path}`" />
<div class="card-body">
<h5 class="card-title">{{movie.original_title}}</h5>
---------------------- Add this part ------------------------------
<div class="card-text">
<p v-if="movie.readMore">
{{ movie.overview | limitDisplay }}
<a v-if="movie.overview.length > 100" #click="toggleReadMore(obj.payload, movie.id, false)">Read More<a>
</p>
<p v-if="!movie.readMore">
{{ movie.overview }}
<a #click="toggleReadMore(true)">Read Less<a>
</p>
</div>
---------------------------------------------------------------
<div class="buttonPosition">
<button
v-on:click="OpenTrailerModal(movie.id)"
type="button"
class="btn btn-success"
>Watch Trailer</button>
</div>
</div>
</div>
</div>
</div>
<button #click="MoreMovies" type="button" class="btn btn-warning moreBtn">Load More Movies</button>
</div>
</template>
In your script add this in your methods and filters :
methods: {
toggleReadMore(payload, movie_id, value){
payload = payload.map(function(item){
if(item.id == movie_id){
item['readMore'] = value;
return item
}
});
}
},
filters : {
limitDisplay: function(value) {
return value.substring(0, 100) + "...";
}
}

Using AngularJS to close Bootstrap Modal window

I'm fairly new to AngularJS, so forgive me if this is a simple question;
I have an AngularJS (v 1.6) app with a user login via a bootstrap modal window.
After the user successfully logs in, I want the modal window to be closed by Angular;
The User login is via a POST call to PHP which queries the database - this all works as expected, but i need the modal window to close if the login was successful. (The PHP responds with a JSON object)
In particular, im looking to replace this code in the Angular controller:
//window.location.href = '/IDD';
with a command to close the modal window.
HTML Code:
<nav class="navbar fixed-top navbar-dark bg-dark">
<a class="navbar-brand" href="">JDCSupport</a>
<div class="nav navbar-nav" style="flex-direction: row;">
<p class="text-center">{{usrName}}</p>
<div data-ng-show="btnLogin">
<button class="btn btn-success btn-sm pull-xs-right"
style="padding: 10px;" data-toggle="modal"
data-target="#loginModal">
Login
</button>
</div>
<div data-ng-show="btnLogout">
<button class="btn btn-warning btn-sm pull-xs-right"
style="padding: 10px; margin-right: 10px;"
type="button">
Logout
</button>
</div>
<div data-ng-show="btnMenu">
<button class="navbar-toggler pull-xs-right" style="padding: 10px;" id="navbarSideButton" type="button">☰</button>
</div>
</div>
<ul class="navbar-side" id="navbarSide">
<li class="navbar-side-item">
Home
</li>
<li class="navbar-side-item">
Staff Roster
</li>
<li class="navbar-side-item">
Photos
</li>
<li class="navbar-side-item">
Messages
</li>
</ul>
<div class="overlay"></div>
</nav>
<div id="loginModal" class="modal fade text-center">
<div class="modal-dialog">
<div class="col-lg-8 col-sm-8 col-12 main-section">
<div class="modal-content">
<div class="col-lg-12 col-sm-12 col-12 user-img">
<img src="images/man.png" alt="">
</div>
<div class="col-lg-12 col-sm-12 col-12 user-name">
<h1>User Login</h1>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="col-lg-12 col-sm-12 col-12 form-input">
<form ng-submit="loginForm()" name="loginform" method="POST">
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" data-ng-model="user.username" name="username" required>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" data-ng-model="user.password" name="password" required>
</div>
<button type="submit" class="btn btn-success">Login</button>
<div class="alert alert-danger" data-ng-show="errorMsg">{{error}}</div>
</form>
</div>
<div class="col-lg-12 col-sm-12 col-12 link-part">
Forgot Password?
</div>
</div>
</div>
</div>
</div>
And my Angular Controller:
app.controller ("logController", function ($scope, $http) {
$scope.btnLogin = true;
$scope.btnLogout = false;
$scope.btnMenu = false;
$scope.errorMsg = false;
$scope.loginForm = function() {
var ans="";
var encodedString = 'username=' +
encodeURIComponent(this.user.username) +
'&password=' +
encodeURIComponent(this.user.password);
$http({
method : 'POST',
url : 'php/login.php',
data : encodedString,
headers : {'Content-type': 'application/x-www-form-urlencoded'}
}).then(function (response) {
console.log(response);
ans = response.data;
if (ans.message == 'correct' ) {
$scope.btnLogin = false;
$scope.btnLogout = true;
$scope.btnMenu = true;
//window.location.href = '/IDD';
} else {
$scope.errorMsg = true;
$scope.error = ans.error;
}
},
function (response) {
//error handling
});
};
});

use the following on login successful
$('#loginModal').modal('hide');

You can achieve that with $('loginModal').modal('hide'); or $('loginModal').modal('toggle');

AngularJS 1.x Display one item at a time in ng-repeat, click on next should display next item and so on

I am developing a quiz web application, where I have to show 100 question in total across 3 different tabs (Math, GK, English), the questions are getting filtered using angular filter. But each tabs are showing all questions in one go (next/previous button not working properly), i tried using various solution provided here but they didn't work either.
The other part of app where all 100 question buttons are shown (in right side of question div) and the user can navigate to any question no. by clicking that button.
The snippet of angular code :
app.controller('examController',['$scope','$http', function ($scope,$http) {
$http.get('/static/exam-files/question').then(function (response) {
$scope.questions = response.data;
console.log($scope.questions);
$scope.mode = "quiz";
})
$scope.qnIndex = 0;
$scope.next = function () {
if ($scope.qnIndex >= $scope.questions.length - 1) {
$scope.qnIndex = 0;
} else {
$scope.qnIndex++;
}
};
$scope.previous = function () {
if ($scope.qnIndex >= $scope.questions.length - 1) {
$scope.qnIndex = 0;
} else {
$scope.qnIndex--;
}
};
}]);
HTML code snippet for 2 tabs-
<uib-tab index="0" heading="Verbal">
<div class="tab-pane fade active in qnPadding" id="Verbal" ng-repeat="question in questions | filter:{type:'verbal'}" ng-if="qnIndex == $index">
<div class="q-div q-height q-background">
<span>Q.No: <span class="q-num">
{{question.questionId}}</span><p>{{question.questionDesc}}</p></span>
</div>
<div class="options well opt-background" style="margin: 10 10 15 15">
<!-- List group -->
<div class="radio" ng-repeat="radiobox in question.options">
<label>
<input type="radio" name="optionsRadios">
{{radiobox}}
</label>
</div>
</div>
<div>
<div class="btn-group " role="group" aria-label="...">
<button type="button" class="btn btn-default btn-pre" ng-disable="$index = 0" ng-click="previous()">Previous</button>
<button type="button" class="btn btn-default btn-next" ng-click="next()">Next</button>
</div>
<div class="btn-group pull-right q-background" role="group" aria-label="...">
<button type="button" class="btn btn-default btn-save">Mark</button>
<button type="button" class="btn btn-default btn-unsel">Un-Select</button>
</div>
</div>
</div>
</uib-tab>
<uib-tab index="1" heading="Math">
<div class="tab-pane active in qnPadding" id="Math" ng-repeat="question in questions | filter: { type: 'math' }" ng-if="qnIndex == $index">
<div class="options well" >
<div> <img src="">
<span>Q.No: <span class="q-num">{{question.questionId}}</span><p>{{question.questionDesc}}</p></span></div>
<div class="radio" ng-repeat="x in question.options">
<label >
<input type="radio" name="optionsRadiosm">
{{x}}
</label>
</div>
</div>
<div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default" ng-click="previous()">Previous</button>
<button type="button" class="btn btn-default" ng-click="next()">Next</button>
</div>
<div class="btn-group pull-right" role="group" aria-label="...">
<button type="button" class="btn btn-default">Mark</button>
<button type="button" class="btn btn-default">Un-Select</button>
</div>
</div>
</div>
</uib-tab>
Index wise buttons ----
<div class="col-md-3">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading opt-background"> Welcome candidate</div>
<div class="panel-body">
<p>your {{Test}} has {{question.count}} question, click on any question no below to navigate
</p>
<div ng-repeat="question in questions">
<button type="button" class="btn btn-info btn-circle btn-lg" ng-click="goTo($index)">{{$index+1}}</button>
</div>
</div>
</div>
</div>
Any help is appreciated. Thanks in advance.

Just Modified #tanmay's answer . to append new record with last one .
var app = angular.module('myApp', []);
app.controller("myCtrl", function($scope) {
$scope.myArray = [123, 3432, 4645, 7657, 4575646, 234, 43, 555]
$scope.count = 0
$scope.clicked = function() {
$scope.count = $scope.count + 1
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<table>
<tr ng-repeat="obj in myArray">
<td ng-show="$index <= count">{{obj}}</td>
<td ng-show="$last && count !== myArray.length - 1">
<button ng-click="clicked()">+</button>
</td>
</tr>
</table>
</div>
</body>

You can go with something like this. It displays one value at a time from ng-repeat based on the value of count which gets increased by clicking on the + button which gets hidden when we reach the end.
Also, note that, similarly, you can have a - button to go to previous value very easily.
Here's the snippet demonstrating this behavior:
var app = angular.module('myApp', []);
app.controller("myCtrl", function($scope) {
$scope.myArray = [123, 3432, 4645, 7657, 4575646, 234, 43, 555]
$scope.count = 0
$scope.clicked = function() {
$scope.count = $scope.count + 1
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<table>
<tr ng-repeat="obj in myArray">
<td ng-show="$index === count">{{obj}}</td>
<td ng-show="$last && count !== myArray.length - 1">
<button ng-click="clicked()">+</button>
</td>
</tr>
</table>
</div>
</body>

Edit fields in angularjs

Hi I am a beginner in Angularjs and was trying to implement edit of a field and trying to save the data..
The below is the html:-
<div class="row" ng-if="showme=='false'">
<div class="myaddress">
<div class="card-addresses">
<div class="card card-address" ng-repeat="address in addresses" ng-click="selectAddress(address)" ng-class="{active : selectedAddress === address}">
<div class="overlay">
<div class="icon icon-approved"></div>
</div>
<div class="card-header">
<div class="pull-left"><span>{{address.label}}</span></div>
<div class="pull-right"><i class="fa fa-pencil" ng-click="editAddress(address)"></i>
<div class="editpopup editpopup-{{istrue}}">
<p>edit id:
<input type="text" ng-model="address.street"/>
</p>
<p>edit pname:
<input type="text" ng-model="address.station"/>
</p>
<button ng-click="save()">save</button>
<button ng-click="closepopup()">cancel</button>
</div> <i class="fa fa-trash" ng-click="delAddress(address)"></i>
</div>
</div>
<div class="card-block">
<p>{{address.building}}</p>
<p>{{address.street}}</p>
<p>{{address.station}} {{address.city}} - {{address.pincode}}</p>
</div>
<div class="card-footer"><span>Default</span></div>
</div>
</div>
<button class="btn btn-success btn-block" type="button" ng-click="addAddress()">Add New Address</button>
</div>
The below is the js:-
$scope.editrow=function($index){
$scope.istrue=true;
$scope.$index = $index;
angular.copy($scope.address[$index], $scope.address);
}
$scope.closepopup=function(){
$scope.istrue=false;
}
$scope.save = function() {
$scope.istrue=false;
angular.copy($scope.addresses, $scope.addresses[0])
Address.save($scope.addresses)
};
I am trying to fetch and save the data in the service Address which gets getting the value from the database

You need store edit state in each address
So html
<div class="row" ng-if="showme=='false'">
<div class="myaddress">
<div class="card-addresses">
<div class="card card-address" ng-repeat="address in addresses" ng-click="selectAddress(address)" ng-class="{active : selectedAddress === address}">
<div class="overlay">
<div class="icon icon-approved"></div>
</div>
<div class="card-header">
<div class="pull-left"><span>{{address.label}}</span></div>
<div class="pull-right"><i class="fa fa-pencil" ng-click="editAddress(address)"></i>
<div class="editpopup editpopup-{{address.istrue}}">
<p>edit id:
<input type="text" ng-model="address.street"/>
</p>
<p>edit pname:
<input type="text" ng-model="address.station"/>
</p>
<button ng-click="save(address)">save</button>
<button ng-click="closepopup(address)">cancel</button>
</div> <i class="fa fa-trash" ng-click="delAddress(address)"></i>
</div>
</div>
<div class="card-block">
<p>{{address.building}}</p>
<p>{{address.street}}</p>
<p>{{address.station}} {{address.city}} - {{address.pincode}}</p>
</div>
<div class="card-footer"><span>Default</span></div>
</div>
</div>
<button class="btn btn-success btn-block" type="button" ng-click="addAddress()">Add New Address</button>
</div>
And js
$scope.editrow=function($index){
$scope.istrue=true;
$scope.$index = $index;
//angular.copy($scope.address[$index], $scope.address); // why you need this?
}
$scope.closepopup=function(address){
address.istrue=false;
}
$scope.save = function() {
address.istrue=false;
// angular.copy($scope.addresses, $scope.addresses[0])// why you need this?
Address.save($scope.addresses)
};