I want to use bootstrap multiselect dropdown for selecting multiple values for parameters . I am using it like -
<div ng-repeat="param in parameters">
<div>{{param.name }} :</div>
<div ng-show = "param.multipleValues">
<select ng-model="param.value" id="testMultiSelect" multiple="multiple">
<option ng-repeat="v in values" value="{{v}}" >{{v}}</option>
</select>
</div>
<div ng-show = "!param.multipleValues">
<input type="text" ng-model="param.value">
</div>
</div>
But , somehow , multiselect is not working inside ng-repeat. If I put it outside of this div having ng-repeat , it works.
It comes like in image -
This may helps you
var app = angular.module('testApp', [ ]);
app.directive('telDropdownmutiple', ['$http', function ($http) {
return {
restrict: 'E',
scope: {
array: '=',
validate: '#',
ngModel: '=',
title: '#',
checkId: '#',
ngmaxLength: '#',
ngminLength: '#',
lblvalue: '#',
textboxSize: '#',
lblSize: '#',
ngShow: '#',
textboxtype: '#',
getString: '#',
multiple: '#',
},
template:'<div id="{{ checkId }}" > <span>{{ title }}</span>:<select {{ multiple }} class="{{className}}" ng-model="ngModel" ng-options="a[optValue] as a[optDescription] for a in array" requireiftrue="{{ validate }}"></div>'+
'<option style="display: none" value="">{{title}}</option>' +
'</select> </div>',
link: function (scope, element, attrs) {
scope.lblvalue = attrs.lblvalue;
scope.title = attrs.title;
scope.optValue = attrs.optValue;
scope.optDescription = attrs.optDescription;
}
};
}]);
app.controller('testController', ['$scope', '$location', function ($scope, $location) {
$scope.SelectMultiple = [
{Id: 1, Description: "option1"},
{Id: 2, Description: "option2"},
{Id: 3, Description: "option3"},
{Id: 4, Description: "option4"},
{Id: 5, Description: "option5"},
{Id: 6, Description: "option6"},
{Id: 7, Description: "option7"},
{Id: 8, Description: "option8"},
{Id: 9, Description: "option9"},
{Id: 10, Description: "option10"}
];
}]);
<script data-require="angular.js#~1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<body class="hold-transition skin-blue sidebar-mini" data-ng-app="testApp">
<!-- Logo -->
<!-- Left side column. contains the logo and sidebar -->
<div class="content-wrapper" style=" margin-top: 50px; margin-bottom: 10px; height: 350px; overflow-y: auto; " ng-controller="testController">
<tel-Dropdownmutiple multiple ng-model="registration.multipledropGender" lblvalue="Gender" array="SelectMultiple" opt-value="Id" opt-description="Description" validate='true' class-Name="form-controlselect select2" ></tel-Dropdownmutiple>
</div>
</body>
Related
I wanted to read the data from the database and display it in the app.
I'm calling it like this :
<h2 class="lowongan1" v-for="value in list_lowongan"> {{ value.title }}</h2>
<p class="descJob1" v-for="value in list_lowongan">{{ value.body }}</p>
The script
export default {
data() {
return {
'form': {
title: '',
body: '',
},
list_lowongan: []
};
},
mounted() {
console.log('on mounted');
axios.get('post/list').then((response) => {
console.log(response.data)
this.list_lowongan = response.data
}).catch((error) => {
console.log(error)
});
},
The problem is, when I call it like that, It displays all the title in the database and the body in the database tables.
How can I make it so that it only display 1 title for each h2 class ?
Use a wrapping div to hold your content and then loop over the div like so:
<div v-for="value in list_lowongan">
<h2 class="lowongan1"> {{ value.title }}</h2>
<p class="descJob1">{{ value.body }}</p>
</div>
You have two for-loops independent of each other so they'll stack by themselves
You just need one for-loop to display a list of where each title and body are together
You can form it this way:
<div v-for="value in list_lowongan">
<h2>{{ value.title }}</h2>
<p>{{ value.body }}</p>
</div>
As per your requirement, No need to use multiple v-for loops for same data iteration. Instead you can achieve that by applying v-for in a wrapper element and then prints the object values inside that wrapper element.
Live Demo :
new Vue({
el: '#app',
data: {
list_lowongan: []
},
mounted() {
this.list_lowongan = [{
title: 'Title 1',
body: 'Body 1'
}, {
title: 'Title 2',
body: 'Body 2'
}, {
title: 'Title 3',
body: 'Body 3'
}]
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="(value, index) in list_lowongan" :key="index">
<h2>{{ value.title }}</h2>
<p>{{ value.body }}</p>
</div>
</div>
When the country is selected, the country flag must be displayed in select option. I need to do that in Vue.
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
select: null,
countries: [
{
name: "Albania",
flag: "em-flag-al"
},
{
name: "Anguilla",
flag: "em-flag-ai"
}
],
}
})
<div id="app">
<v-app class="container">
<v-select
v-model="select"
:items="countries"
label="Select"
item-text="name"
>
<template v-slot:item="slotProps" >
<i :class="['mr-2', 'em', slotProps.item.flag]"></i>
{{slotProps.item.name}}
</template>
</v-select>
</v-app>
</div>
Or you can refer to https://codepen.io/aaha/pen/ZEbRwpy?editors=1010
You can use another slot for the selection :)
<template v-slot:selection="slotProps">
<i :class="['mr-2', 'em', slotProps.item.flag]"></i>
<span>{{ slotProps.item.name }}</span>
</template>
I'm beginner in Ajax and I'm using Laravel 8. I want to remove row that from database but when I try this code it's removing first row but it needs to remove the returned id row. How can I remove the row?
My blade is:
<div class="anime__review__item" id="testp" >
<div class="anime__review__item__pic">
<img src="<?=url('/')?>/images/avatars/{{$comment->user->photo}}" alt="">
</div>
<div class="anime__review__item__text" >
<h6><a href="{{route('getProfile', ['username'=> $comment->user->username])}}" >{{$comment->user->name }}</a></a><span >{{$comment->created_at->diffForHumans()}}</span></h6>
<p> {{$comment->comment }}</p>
<p class="card-text"><span class="icon_trash" type="button" data-id="{{ $comment->id }}" data-target="#default{{ $comment->id }}"></span></p>
</div>
</div>
My ajax is:
$(".icon_trash").click(function(event){
event.preventDefault();
var id = $(this).data("id");
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.isConfirmed) {
$.ajax({
url: "{{ route('deleteComments',['id' => $comment->id]) }}",
type: 'POST',
data: {
_token: "{{ csrf_token() }}",
id: id
},
success: function (){
$("#testp").remove();
},
error: function(){
alert('errorr');
},
})
}
})
});
My controller is:
public function deleteComments($id){
$deletedata= Comment::findOrFail($id);
$deletedata->delete();
if($deletedata){
return response()->json(['status'=>'testss']);
}else{
return back();
}
}
Since all divs have same ID, you have this issue. To solve, have unique IDs and unique removals as below:
Have dynamic value for div ID as:
<div class="anime__review__item" id="testp_{{ $comment->id }}">
Remove the respective ID accordingly in your ajax code as:
$("#testp_{{ $comment->id }}").remove();
This way, you correctly remove the parent div of the respective deleted comment.
I've got this code:
My list, wich should work like a navigation with main nav points and sub nav poins:
list = [
{
Id: 1,
Name: 'Main 1',
Items: [
{
Id: 1,
Name: 'Sub 1'
},
{
Id: 2,
Name: 'Sub 2'
}
]
},
{
Id: 2,
Name: 'Main 2',
Items: [
{
Id: 1,
Name: 'Sub 1'
},
{
Id: 2,
Name: 'Sub 2'
}
]
}
];
And this is my HTML. I loop the main poins and it's sub points with ng-repeat and try to set some id's dynamicly with the $index.:
<div class="wrapper" ng-repeat="item in list">
<div id="main_{{$index}}">{{item.Name}}</div>
<div id="main_{{$parent.$index}}_sub_{{$index}}" ng-repeat="sub in item.Items">
<div>— {{sub.Name}}</div>
</div>
</div>
My result is something like this and it works fine:
Main 1
- Sub 1
- Sub 2
Main 2
- Sub 1
- Sub 2
My goal is now to assign a id to my div with the main and my div with the subs. I add the current index with $index to my id in the main div and after that I try to combine the id for the sub divs with the index from the main (it's parent) and the current index. To get the index of the parent, I used $parent.$index. My expected result are follow id's:
Main 1 -> id = main_0
- Sub 1 -> id = main_0_sub_0
- Sub 2 -> id = main_0_sub_1
Main 2 -> id = main_1
- Sub 1 -> id = main_1_sub_0
- Sub 2 -> id = main_1_sub_1
But this doesn't work at the moment. The id's for the main div is correct, but the id for the sub isn't. I thought with $parent.$index it should work, but there is a problem with the current index of the main. I have no idea how to solve this. I hope someone can help me.
Try the below code snippet, it's working fine here !
var app = angular.module('app',[]);
app.controller('Ctrl',function($scope){
$scope.list = [
{
Id: 1,
Name: 'Main 1',
Items: [
{
Id: 1,
Name: 'Sub 1'
},
{
Id: 2,
Name: 'Sub 2'
}
]
},
{
Id: 2,
Name: 'Main 2',
Items: [
{
Id: 1,
Name: 'Sub 1'
},
{
Id: 2,
Name: 'Sub 2'
}
]
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
<div class="wrapper" ng-repeat="item in list">
<div id="main_{{$index}}">{{item.Name}} - main_{{$index}}</div>
<div id="main_{{$parent.$index}}_sub_{{$index}}" ng-repeat="sub in item.Items">
<div>— {{sub.Name}} - main_{{$parent.$index}}_sub_{{$index}}</div>
</div>
</div>
</div>
I notice that what you want is have the $index-1. Try this:
<div class="wrapper" ng-repeat="item in list">
<div id="main_{{$index-1}}">{{item.Name}}</div>
<div id="main_{{$parent.$index-1}}_sub_{{$index-1}}" ng-repeat="sub in item.Items>
<div>— {{sub.Name}}</div>
</div>
</div>
I am using the AngularDynamicform to generate a dynamic form in page and the fields are displaying fine in a horizontal manner. But I want to display the input fields with in different sections in the page.
In my page
<div class="box-content">
<h4 class="page-header">New Contact</h4>
<dynamic-table-form fields="fields" data="data" class="form-horizontal">
<input dynamic-field-type="string" ng-model="value" type="text" maxlength="{{config.maxLength}}" size="{{config.maxLength}}">
<input dynamic-field-type="date" ng-model="value" type="date">
<ul dynamic-field-type="array">
<li dynamic-field-child>
<ng-transclude></ng-transclude>
<button ng-click="removeChild(childKey)">Remove</button>
</li>
<button ng-click="addChild()">Add Another</button>
</ul>
<select dynamic-field-type="select" ng-model="value" ng-options="option.value as option.caption for option in config.options"></select>
<input dynamic-field-type="integer" ng-model="value" type="number" size="{{config.maxLength}}" maxlength="{{config.maxLength}}" min="{{config.minValue}}" max="{{config.maxValue}}">
<button ng-click="create()">Save</button>
</dynamic-table-form>
<button ng-click="create()">save</button>
And in my controller
$scope.fields = [
{
caption: 'Name',
model: 'name',
type: 'string',
maxLength: 25
},
{
caption: 'Date of Birth',
model: 'dateOfBirth',
type: 'date'
},
{
caption: 'Employee name',
model: 'employee.name',
type: 'string',
maxLength: 25
},
{
caption: 'Employee City',
model: 'employee.city',
type: 'string',
maxLength: 25
}
];
for example, I want to display the last two fields(Employee name & Employee City)in other section called Employee details. How can I do it?
Thanks in advance.