I am really confused on this one and need help. (unrelated : "up for about 36 hours now to finish somthing and this last part is just making me go crazy")
My Code
<body>
<div id="mycontainer" style="margin: 20px; ">
</div>
<script type="text/template" id="Myelement_template">
<% _.each( results, function( item, i ){ %>
<div id="Myelement" style="width: 200px; height:325px; padding: 10px; background-color: #2980b9;">
<div id="image" style="width: 190px; height: 200px; margin: auto; background-color: #f1c40f;">
<img src="<%= item.get('category').url %>" style="max-width: 90%;margin-top: 10px;">
</div>
<div id="type" style="float:left;width: 90px; height: 25px; margin-left: 5px;margin-top: 5px;background-color: #f1c40f;">
<%= item.get("category").type %>
</div>
<div id="name" style="float:left;width: 90px; height: 25px; margin-left: 10px; margin-top: 5px;background-color: #f1c40f;">
<%= item.get("category").name %>
</div>
</div>
<% }); %>
</script>
<script type="text/javascript">
$(document).ready(function() {
CategoryModel = Backbone.Model.extend({
defaults: {
url: '',
type: '',
name: ''
}
});
MyListModal = Backbone.Model.extend({
url: 'myrestapi',
defaults: {
category: CategoryModel
}
});
MyElementView = Backbone.View.extend({
initialize: function() {
_.bindAll(this, 'render'); // bind 'this' in 'render'
this.model = new MyListModal();
this.model.bind('change', this.render);
this.model.fetch(this.render);
},
el: $("#mycontainer"),
render: function(){
console.log(this.model.get("category"));
}
});
var myModelView = new MyElementView();
});
</script>
Question
My rest api will return many BaseModel objects. All of them need to be rendered. How do I do that?
console.log(this.model.get("category")); - code reaches here. not printing. debugging shows that rest api call was made and cata has been returned
How do I render all returned elements?
Sample Data returned by rest API
[
{
"category": {
"id": 1,
"name": "name1",
"type": "mytype1",
"url": "myurl1"
},
"user": {
"id": 153
},
"status": 1
},
{
"category": {
"id": 1,
"name": "name2",
"type": "type2",
"url": "url2"
},
"user": {
"id": 153
},
"status": 1
},
]
Related
I have an array of objects:
[{
title: 'foo'
id: 1,
name: 'anne'
},
{
title: 'example',
id: 2,
name: 'anne'
},
{
title: 'ex',
id: 3,
name: 'deb'
}]
The page is already showing the first object:
{
title: 'foo'
id: 1,
name: 'anne'
},
<div class="essay">
<p class="title" >{{ selectedItem.title }}</p>
<p class="id">{{ selectedItem.id }}</p>
<p class="name"> {{ selectedItem.name }} </p>
</div>
selectedItem comes from the created() life cycle
What is the best way to display the object with the same name?
I want to have a button which if clicked, will show another title from the person name 'anne'.
Try to get the filtered array.
created() {
this.selectedItem = arr.filter(item => item.name === 'anne');
// arr is the array source variable.
}
<div v-for="item in selectedItem" :key="item.id" class="essay">
<p class="title" >{{ selectedItem.title }}</p>
<p class="id">{{ selectedItem.id }}</p>
<p class="name"> {{ selectedItem.name }} </p>
</div>
I've made a snippet, maybe it would help You :-)
We need to store state somewhere, so I've created owners variable with shown counter.
There is also a computed property that groups items by owners.
Maybe there is an easier method but...
new Vue({
el: '#app',
data: {
items: [
{ owner: "John", name: "Box" },
{ owner: "John", name: "Keyboard" },
{ owner: "John", name: "Plate" },
{ owner: "Ann", name: "Flower" },
{ owner: "Ann", name: "Cup" }
],
owners: {},
},
methods: {
more(owner) {
if (this.owners[owner].shown < this.items.filter(i => i.owner == owner).length) {
this.owners[owner].shown++;
}
}
},
computed: {
ownersItems() {
let map = {};
this.items.forEach(i => {
map[i.owner] = map[i.owner] || [];
if (this.owners[i.owner].shown > map[i.owner].length) {
map[i.owner].push(i);
}
});
return map;
},
},
created() {
let owners = {};
this.items.forEach(i => {
owners[i.owner] = owners[i.owner] || {};
owners[i.owner].shown = 1;
});
this.owners = owners;
}
})
#app {
font-family: sans-serif;
padding: 1rem;
}
.header {
font-weight: bold;
margin-bottom: .5rem;
}
sup {
background: #000;
color: #fff;
border-radius: .15rem;
padding: 1px 3px;
font-size: 75%;
}
.btn {
padding: .25rem .5rem;
border: 1px solid #ddd;
background: #eee;
border-radius: .15rem;
margin: 2px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="header">Owners</div>
<template v-for="(cfg, owner) in owners">
<strong>{{ owner }} <sup>{{cfg.shown}}</sup>:</strong>
<a v-for="(item, i) in ownersItems[owner]" :key="`${owner}_${i}`" #click="more(owner)" class="btn">{{ item.name }}</a>
|
</template>
</div>
Is there a simple solution I can use to remove the duplicates from my v-for loop which is looping through the JSON data.
I'm using this to populate a Select option and would rather not import https://lodash.com/docs#uniq
Codepen with issue: https://codepen.io/anon/pen/JaZJmP?editors=1010
Thanks
Create a computed property that returns only those items from your array which you want/need. To remove duplicates from info, you can do new Set(this.info.map(i=>i.title.rendered) and destructure that back into an array using [...new Set(this.map(i=>i.title.rendered))]:
var vm = new Vue({
el: "#wp-vue-app",
data() {
return {
info: [{
id: 1,
status: "publish",
link: "",
title: {
rendered: "Test Name One"
},
acf: {
employee_details: {
employee_name: "Test Name",
employee_email: "Test-Email#email.co.uk",
employee_number: "123",
cost_centre_manager: "Manager Name",
manager_email: "Manager-Email#email.co.uk"
}
}
},
{
id: 2,
status: "publish",
link: "",
title: {
rendered: "Test Name"
},
acf: {
employee_details: {
employee_name: "Test Two Name",
employee_email: "Test-Two-Email#email.co.uk",
employee_number: "1234",
cost_centre_manager: "Manager Two Name",
manager_email: "Manager-Two-Email#email.co.uk"
}
}
},
{
id: 3,
status: "publish",
link: "",
title: {
rendered: "Test Name"
},
acf: {
employee_details: {
employee_name: "Test Three Name",
employee_email: "Test-Three-Email#email.co.uk",
employee_number: "12345",
cost_centre_manager: "Manager Three Name",
manager_email: "Manager-Three-Email#email.co.uk"
}
}
}
],
loading: true,
errored: false,
emp_manager: "All",
emp_cost_centre: "All"
};
},
computed: {
info_title: function() {
return [...new Set(this.info.map(i => i.title.rendered))]
},
info_employee_name: function() {
return [...new Set(this.info.map(i => i.acf.employee_details.employee_name))]
},
},
});
.container {
padding: 20px;
width: 90%;
max-width: 400px;
margin: 0 auto;
}
label {
display: block;
line-height: 1.5em;
}
ul {
margin-left: 0;
padding-left: 0;
list-style: none;
}
li {
padding: 8px 16px;
border-bottom: 1px solid #eee;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<div id="wp-vue-app">
<section v-if="errored">
<p>We're sorry, we're not able to retrieve this information at the moment, please try back later</p>
</section>
<section v-else>
-
<div class="row">
<div class="col">
<select class="form-control" v-model="emp_manager">
<option>All</option>
<option v-for="item in info_title" :value="item">{{ item }}</option>
</select>
<span>Selected: {{ emp_manager }}</span>
</div>
<div class="col">
<select class="form-control" v-model="emp_cost_centre">
<option>All</option>
<option v-for="item in info_employee_name" :value="item">{{ item }}</option>
</select>
<span>Selected: {{ emp_cost_centre }}</span>
</div>
</div>
<br />
</section>
</div>
https://codepen.io/anon/pen/bxjpKG
You can use a computed property to filter your info (let's say filteredInfo). Then use v-for on the filteredInfo property.
Look in this fiddle https://jsfiddle.net/Lj0swckj/3/
I have created directive for sortable
For parent divs sortable working fine
I want same thing for childs also with containment as its parent
In the given example child1, child2, child3 can swap positions and containment will be parent1.
I tried a lot but can't find anything
Note: There can also children for a child1, child2...
(Here In this example i have added data for two levels but it can be upto four levels)
So I want a solution where sortable can work for such kind of recursive templates.
Any Help would be appreciated.
angular.module("myApp", []).
controller("myController", ['$scope', function($scope) {
$scope.fields = [{
"name": "parent1",
"level": 1,
"children": [{
"name": "child1",
"level": 2
}, {
"name": "child2",
"level": 2
}, {
"name": "child3",
"level": 2
}]
}, {
"name": "parent2",
"level": 1
}, {
"name": "parent3",
"level": 1
}];
$scope.draggableItemsOption = {
"moverElement": ".moverBtn",
"containment": ".draggable-field"
}
}]).directive("myDragDrop", ['$timeout', function ($timeout) {
return {
restrict:'A',
scope: {
myDragDrop:"="
},
link: function ($scope, element, attrs) {
var options = $scope.myDragDrop;
var $container = element;
var sortableOptions = {
/* handle: options.moverElement, */
containment: options.containment,
delay: 0
};
if($container.sortable){
$container.sortable(sortableOptions);
}
}
}
}]);
.element {
border: 1px solid #333;
padding: 10px 10px;
position: relative;
}
.element-class {
margin-left: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<div class="draggable-field" my-drag-drop="draggableItemsOption">
<div ng-repeat="data in fields">
<div class="element" ng-class="{'element-class': data.level > 1}">
{{data.name}}
<div ng-repeat="childData in data.children">
<div class="element" ng-class="{'element-class': data.level > 1}">
{{childData.name}}
</div>
</div>
</div>
</div>
</div>
</div>
Huh ! Finally Got a solution.
Actually it is pretty simple
Here look at this fiddle https://jsfiddle.net/Lj0swckj/6/
What I did is created child elems
angular.module("myApp", []).
controller("myController", ['$scope', function($scope) {
$scope.fields = [{
"name": "parent1",
"level": 1,
"children": [{
"name": "child1",
"level": 2
}, {
"name": "child2",
"level": 2
}, {
"name": "child3",
"level": 2,
"children": [{
"name": "grandChild1",
"level": 3
}, {
"name": "grandChild2",
"level": 3
}]
}]
}, {
"name": "parent2",
"level": 1,
"children": [{
"name": "child4",
"level":2
}]
}, {
"name": "parent3",
"level": 1
}];
$scope.draggableItemsOption = {
"moverElement": ".moverBtn",
"containment": ".draggable-field"
}
$scope.childDraggableItemsOption = {
"containment": "parent"
}
}]).directive("myDragDrop", ['$timeout', function ($timeout) {
return {
restrict:'A',
scope: {
myDragDrop:"="
},
link: function ($scope, element, attrs) {
var options = $scope.myDragDrop;
var $container = element;
var sortableOptions = {
/* handle: options.moverElement, */
containment: options.containment,
delay: 0
};
if($container.sortable){
$container.sortable(sortableOptions);
}
}
}
}]);
.element {
border: 1px solid #333;
padding: 10px 10px;
position: relative;
}
.element-class {
margin-left: 20px;
}
.moverBtn {
position: absolute;
top: 2px;
right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-autocomplete/1.0.7/jquery.auto-complete.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<script type="text/ng-template" id="tree_item_renderer.html">
<div class="child-draggable-field" my-drag-drop="childDraggableItemsOption">
<div ng-repeat="data in data.children" ng-class="{'element-class': data.level > 1}">
<div class="element"> {{data.name}} ------ {{$parent.$parent.data.children.length}}</div>
<div ng-include="'tree_item_renderer.html'">
</div>
</div>
</div>
</script>
<div class="draggable-field" my-drag-drop="draggableItemsOption">
<div ng-repeat="data in fields">
<div class="element" ng-class="{'element-class': data.level > 1}">
{{data.name}}
<div ng-include="'tree_item_renderer.html'">
</div>
</div>
</div>
</div>
</div>
I have an angular application that is also using jquery.dataTables. When I use datatables to build a dynamic table with the ng-click angular directive in the table data, it does not fire the ng-click event.
I suspect that I need to use the angular $compile service, but I have not been successful finding clear documentation or examples.
Any help would be greatly appreciated.
UPDATE: I have added some code to the createdRow option in the DataTables method. I seems to be firing now, but I get an error
0x800a01b6 - JavaScript runtime error: Object doesn't support property
or method '$apply'
Here is my code:
var app = angular.module('appy', []);
app.controller('myCtrl', [
function() {
var _this = this;
$('#report').DataTable({
data: [{
"LastName": "Doe",
"Link": "<button type=\"button\" ng-click=\"Ctrl.dataTablesAlert()\">Test Alert</a>"
}],
columns: [{
"title": "Last Name",
"data": "LastName"
}, {
"title": "Actions",
"data": "Link"
}],
createdRow: function(row, data, dataIndex) {
$compile(angular.element(row).contents())(_this);
}
});
this.buttonAlert = function() {
$('#buttondiv').addClass('success');
};
this.htmlAlert = function() {
$('#htmltablediv').addClass('success');
};
this.dataTablesAlert = function() {
$('#datatablediv').addClass('success');
};
}
]);
div {
margin-top: 15px;
padding: 5px;
}
div.borderdiv {
border: 1px solid black;
}
td {
border: 1px solid black;
padding: 2px
}
.success {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="appy" ng-controller="myCtrl as Ctrl">
<div id="buttondiv" class=borderdiv>
<h4>Button with ng-click</h4>
<button type="button" ng-click="Ctrl.buttonAlert()">Test Alert</button>
</div>
<div id="htmltablediv" class="borderdiv">
<h4>HTML Table with ng-click</h4>
<table>
<tr>
<td>Last Name</td>
<td>Actions</td>
</tr>
<tr>
<td>Doe</td>
<td>
<button ng-click="Ctrl.htmlAlert()">
Test Alert
</button>
</td>
</tr>
</table>
</div>
<div id="datatablediv" class="borderdiv">
<h4>DataTables with ng-click</h4>
<table id="report" class="display"></table>
</div>
</div>
$compile takes in a snippet of HTML and returns what's known as a linking function. This function takes a $scope that will it will use to do all the databinding.
This might have been confusing since you are using the controller as syntax (which is a good thing), so you don't deal directly $scope.
The two things you need to do here are to inject both $compile and $scope into your controller, and then use them.
//Using array injector notation here
app.controller('myCtrl',
['$scope','$compile',
function($scope, $compile) {
//snip...
}
]);
And then later when you are linking your row, you can call it with the injected $scope like this:
$compile(angular.element(row).contents())($scope);
If you run the snippet below, you can see it all works as expected.
var app = angular.module('appy', []);
app.controller('myCtrl', ['$scope','$compile',
function($scope, $compile) {
var _this = this;
$('#report').DataTable({
data: [{
"LastName": "Doe",
"Link": "<button type=\"button\" ng-click=\"Ctrl.dataTablesAlert()\">Test Alert</a>"
}],
columns: [{
"title": "Last Name",
"data": "LastName"
}, {
"title": "Actions",
"data": "Link"
}],
createdRow: function(row, data, dataIndex) {
$compile(angular.element(row).contents())($scope);
}
});
this.buttonAlert = function() {
$('#buttondiv').addClass('success');
};
this.htmlAlert = function() {
$('#htmltablediv').addClass('success');
};
this.dataTablesAlert = function() {
$('#datatablediv').addClass('success');
};
}
]);
div {
margin-top: 15px;
padding: 5px;
}
div.borderdiv {
border: 1px solid black;
}
td {
border: 1px solid black;
padding: 2px
}
.success {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="appy" ng-controller="myCtrl as Ctrl">
<div id="buttondiv" class=borderdiv>
<h4>Button with ng-click</h4>
<button type="button" ng-click="Ctrl.buttonAlert()">Test Alert</button>
</div>
<div id="htmltablediv" class="borderdiv">
<h4>HTML Table with ng-click</h4>
<table>
<tr>
<td>Last Name</td>
<td>Actions</td>
</tr>
<tr>
<td>Doe</td>
<td>
<button ng-click="Ctrl.htmlAlert()">
Test Alert
</button>
</td>
</tr>
</table>
</div>
<div id="datatablediv" class="borderdiv">
<h4>DataTables with ng-click</h4>
<table id="report" class="display"></table>
</div>
</div>
this all for Jquery datatable.
"Link": "<button type=\"button\" ng-click=\"Ctrl.dataTablesAlert()\">Test Alert</a>"
createdRow: function(row, data, dataIndex) {
$compile(angular.element(row).contents())(_this);
)
write like this
"Link": "<button type='button' ng-click='Ctrl.dataTablesAlert()'>Test Alert</a>"
createdRow: function(row, data, dataIndex) {
$compile(angular.element(row).contents())(_this);
$compile(angular.element(data).contents())(_this);
)
this resolve my problem for Jquery datatable
but if you have angulrjs datatable and you are unable to work with ng-click or other events of angulrjs then you just have to compile what like
app.controller('auditListController', function($scope, $compile){
html = "<a href='javascript:void(0)' ng-click='myfunction("+ myvariable + ")'><i class='icon fa fa-exchange' aria-hidden='true'></i></a>";
$compile(angular.element(html).contents())($scope);
$scope.myfunction = function (myvar) {
console.log("myvar", myvar);
}
}
For those who wants to access $compile and $scope from outside angular and apply it to the datatable rows.. here I have the answer
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
var $injector = angular.element(document.body).injector();
var scope = angular.element(document.body).scope();
$injector.invoke(function($compile) {
$compile(nRow)(scope);
});
},
with this you can add every ng event to the row and it will work! :D
Hi i'm trying to get the minimum price in my repeater. I'll add a green sign near to this list item. (as you see in code, "span class min-value")
How can I get this minimum value and use my span as "ng-show" in my html?
Thank you.
var app = angular.module("App", []);
app.controller("Controller", function($scope) {
$scope.priceList = [{
"name": "Product 1",
"price": "100"
}, {
"name": "Product 2",
"price": "200"
}, {
"name": "Product 3",
"price": "300"
}, {
"name": "Product 4",
"price": "400"
}, {
"name": "Product 5",
"price": "500"
}];
});
li {
padding: 10px;
}
.min-price {
width: 10px;
height: 10px;
background: green;
display: inline-block;
border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<html lang="en" ng-app="App">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body ng-controller="Controller">
<ul>
<li ng-repeat="item in priceList">
{{item.name}} - {{item.price}}$
<span class="min-price" ng-show="true"></span>
</li>
</ul>
</body>
</html>
Here is simple logic for you:-
<span class="min-price" ng-show="isMin(item.price)"></span>
$scope.isMin=function(price){
var min=$scope.priceList[0].price;
for(var i=0;i<= $scope.priceList.length-1;i++){
if(Number($scope.priceList[i].price) < min){
min=$scope.priceList[i].price;
console.log("Min"+min);
}
}
console.log("min:"+min+ " price:"+price);
if(min===price){
return true;
}else{
return false;
}
}
Plunker
Compute the minimum price in the controller, using JavaScript code, and store the result in a scope variable (minimumPrice for example).
Then use
ng-show="item.price == minimumPrice"
Hint: don't use strings to represent numbers. Use numbers.