Related
How to get a v-bind :value='p.id value to another data variable in Vue Cli, i have got a Array data named something like items, which have been bind in a input like :value='p.id. i need to get those input values in another variable like ItemId. Here is the code
<template>
<div class="container">
<div class="card" v-for="(p, index) in items" :key="index">
<h4>{{p.title}}</h4>
<p>{{p.content}}</h4>
<input type="hidden" name="ItemId" :value='p.id' #input="$emit('ItemId', $event.target.value)" />
<div class="view">
<p><span>{{countedData}}</span>....</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: "home",
data() {
return {
items: [
{ 'id':1,
'title':'Sample 1'
'content':'Sample 1 data goes here'
},
{ 'id':2,
'title':'Sample 2'
'content':'Sample 2 data goes here'
},
{ 'id':3,
'title':'Sample 3'
'content':'Sample 3 data goes here'
},
{ 'id':4,
'title':'Sample 4'
'content':'Sample 4 data goes here'
}
],
comments:[
{
"id": 1,
"author": "Admin",
"body": "Wow Super!",
"created_on": "2019-12-13T14:30:47.361179Z",
"post": 1
},
{
"id": 2,
"author": "Admin",
"body": "Wow Super! super!",
"created_on": "2019-12-13T14:32:58.970035Z",
"post": 1
},
{
"id": 3,
"author": "Admin",
"body": "Yes! Super Blog!",
"created_on": "2019-12-14T09:31:46.031843Z",
"post": 2
},
{
"id": 4,
"author": "Admin",
"body": "Super Super",
"created_on": "2019-12-14T10:35:55.843957Z",
"post": 2
}
],
ItemId:0
};
},
computed: {
commentFilter: function() {
const PostID = this.ItemId;
return this.comments.filter(function(el) {
return el.post === PostID;
});
},
},
</script>
on above code i will get nearly four input with different value, what i need is pass those value to ItemId. {{countedData}} is the total count that going to get filtering the post.
I just need is to know how to get the input values to ItemId to create a filter and get separate count, which i already bind so i can't use v-model.
You can pass the same value to a method as a parameter, and work with that from then on.
Just make sure, that the method is called every time data is changed. You could implement a watcher to take care of that.
(Sorry, but your question wasn't exactly clear to me, so I only gave it a shot... :) )
new Vue({
el: "#app",
data() {
return {
items: [{
'id': 1,
'title': 'Sample 1',
'content': 'Sample 1 data goes here'
},
{
'id': 2,
'title': 'Sample 2',
'content': 'Sample 2 data goes here'
},
{
'id': 3,
'title': 'Sample 3',
'content': 'Sample 3 data goes here'
},
{
'id': 4,
'title': 'Sample 4',
'content': 'Sample 4 data goes here'
}
],
comments: [{
"id": 1,
"author": "Admin",
"body": "Wow Super!",
"created_on": "2019-12-13T14:30:47.361179Z",
"post": 1
},
{
"id": 2,
"author": "Admin",
"body": "Wow Super! super!",
"created_on": "2019-12-13T14:32:58.970035Z",
"post": 1
},
{
"id": 3,
"author": "Admin",
"body": "Yes! Super Blog!",
"created_on": "2019-12-14T09:31:46.031843Z",
"post": 2
},
{
"id": 4,
"author": "Admin",
"body": "Super Super",
"created_on": "2019-12-14T10:35:55.843957Z",
"post": 2
}
],
ItemId: 0
};
},
methods: {
commentFilter: function(id) {
return this.comments.filter(el => {
return el.post === id;
})
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="container">
<div class="card" v-for="(p, index) in items" :key="index">
<h4>{{p.title}}</h4>
<p>{{p.content}}</p>
<input type="hidden" name="ItemId" :value='p.id' #input="$emit('ItemId', $event.target.value)" />
<p>Comment count: {{commentFilter(p.id).length}}</p>
<ul>
<li v-for="comment in commentFilter(p.id)" :key="comment.id">
<p>Author: {{comment.author}}</p>
<p>Comment body: {{comment.body}}</p>
</li>
</ul>
<!--<div class="view">
<p><span>{{countedData}}</span>....</p>
</div>-->
</div>
</div>
</div>
Ui-Grid external filtering is not working and also didn't show me the data of an object Json. I am retreiving a data from server and it has complexity.
HTML--->
<div ng-controller="MainCtrl">
<input ng-model='filterValue'/>
<button ng-click='filter()'>Filter</button>
<button type="button" class="btn btn-sm btn-default"
ng-click="changeFilter('')">Filter Clear</button>
<button type="button" class="btn btn-sm btn-default"
ng-click="changeFilter('1')">Filter (1)</button>
<button type="button" class="btn btn-sm btn-default"
ng-click="changeFilter('5')">Filter (5)</button>
<button type="button" class="btn btn-success"
ng-disabled="!gridApi.grid.options.multiSelect"
ng-click="selectAll()">Select All</button>
<button type="button" class="btn btn-success"
ng-click="clearAll()">Clear All</button>
<br />
<div ui-grid="gridOptions" ui-grid-selection="" class="grid"></div>
<hr />
</div>
AngularJS---->
var app = angular.module('app', [
'ngTouch', 'ui.grid', 'ui.grid.selection']);
app.controller('MainCtrl', [
'$scope', '$http', '$log', '$timeout', 'uiGridConstants',
function ($scope, $http, $log, $timeout, uiGridConstants) {
$scope.gridOptions = {
enableFullRowSelection: true,
modifierKeysToMultiSelect: true,
enableRowSelection: true,
enableSelectAll: true,
showGridFooter:true,
enableFiltering: true
};
$scope.gridOptions.columnDefs = [
{ name: 'id' },
{ name: 'title'},
{ name: 'createdDate' },
{ name: 'description' }
];
$scope.gridOptions.multiSelect = true;
$scope.filter = function() {
$scope.gridApi.grid.refresh();
};
$scope.singleFilter = function( renderableRows ){
var matcher = new RegExp($scope.filterValue);
renderableRows.forEach( function( row ) {
var match = false;
[
'id',
'title',
'createdDate',
'description',
].forEach(function( field ){
if (row.entity[field].match(matcher)) {
match = true;
}
});
if (!match) {
row.visible = false;
}
});
return renderableRows;
};
$http.get('test.json')
.success(function(data) {
console.log(data);
$scope.gridOptions.data = data;
$timeout(function() {
if($scope.gridApi.selection.selectRow){
$scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
}
});
});
$scope.info = {};
$scope.selectAll = function() {
$scope.gridApi.selection.selectAllRows();
};
$scope.clearAll = function() {
$scope.gridApi.selection.clearSelectedRows();
};
$scope.changeFilter = function(val){
$scope.filterValue = val;
$scope.gridApi.grid.refresh();
}
$scope.gridOptions.onRegisterApi =
function(gridApi){
//set gridApi on scope
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope, function (row) {
});
$scope.gridApi.grid.registerRowsProcessor( $scope.singleFilter, 200 );
gridApi.selection.on.rowSelectionChangedBatch($scope,function(rows){
var msg = 'rows changed ' + rows.length;
$log.log(msg);
});
};
}])
Server Response and simplified version of complexity--->;
[ {
"id": 1882,
"eventTypeId": 1,
"occuredDate": "2016-06-06T00:00:00",
"title": "Event Refresh",
"description": "Test for auto refresh",
"studyId": 2,
"statusId": 1,
"severityId": 3,
"priorityId": 2,
"status": 1,
"createdDate": "2016-06-06T13:53:42",
"$$hashKey": "uiGrid-0014"
},
{
"id": 1879,
"eventTypeId": 2,
"occuredDate": "2016-06-03T00:00:00",
"title": "Test one more timeout",
"description": "testing timeout",
"studyId": 4,
"statusId": 5,
"severityId": 2,
"priorityId": 2,
"status": 1,
"createdDate": "2016-06-06T13:53:42",
"$$hashKey": "uiGrid-001A"
},
{
"id": 1882,
"eventTypeId": 1,
"occuredDate": "2016-06-06T00:00:00",
"title": "Event Refresh",
"description": "Test for auto refresh",
"studyId": 2,
"statusId": 1,
"severityId": 3,
"priorityId": 2,
"status": 1,
"createdDate": "2016-06-06T13:53:42",
"$$hashKey": "uiGrid-0014"
}]
Here is an object i can reach any data of the server response but when the time has come to show data on ui-grid its kind of ignoring the whole data like as in the plunker that i created.
here is the not working plunker i have created one. Please have a look at that what I am missing here? and please update the plunk if any solution has come.
thanks
The code row.entity[field].match(matcher) is problematic as there is no match function, you need to use .test:
$scope.singleFilter = function( renderableRows ){
var matcher = new RegExp($scope.filterValue);
renderableRows.forEach( function( row ) {
var match = false;
['id','title','createdDate','description',].forEach(function( field ){
if (matcher.test(row.entity[field])) {
match = true;
}
});
if (match) {
row.visible = true;
}
else{
row.visible = false;
}
});
return renderableRows;
};
It's worth noting that your filter is in fact case-sensitive so if you search for 'event' you won't get anything, but 'Event' will get you three results.
Working plnkr
For some reason, when I splice an object into my ng-repeat array, it doubles what I splice in and hides the last object in the array.
However, if I click the toggle hide and "refresh" the ng-repeat, it shows the right data.
Does anyone know why this would be happening and what I can do to fix it?
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.workflow = {
flow: [{
"id": "1334f68db820f664",
"step_number": 1,
"tasks": [{
"id": "1334f68e3f20f665"
}]
}, {
"id": "134967a5ba205f5b",
"step_number": 2,
"tasks": [{
"id": "134972c5b420e027"
}]
}, {
"id": "1334f68e7d209ae6",
"step_number": 3,
"tasks": [{
"id": "1334f68ef6209ae7"
}]
}]
};
$scope.insertStep = function() {
var insertStepIndex = 1,
task_data = {
"id": null,
"step_number": (insertStepIndex + 2),
"tasks": []
};
//go through each item in the array
$.each($scope.workflow.flow, function(index, step) {
//if the step number is greater then the place you want to insert it into, increase the step numbers
if (step.step_number > $scope.workflow.flow[insertStepIndex].step_number) step.step_number++;
});
$scope.workflow.flow.splice((insertStepIndex + 1), 0, task_data);
}
$scope.toggleHide = function() {
$scope.hide = !$scope.hide;
}
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div ng-click="insertStep()">Insert Step</div>
<br />
<br />
<div ng-click="toggleHide()">Toggle Repeat</div>
<br />
<br />
<div ng-if="!hide">
<div ng-repeat="data in workflow.flow | orderBy:'+step_number'" ng-init="$stepIndex = workflow.flow.indexOf(data)">
{{ workflow.flow[$stepIndex].step_number }}
</div>
</div>
</div>
I got the problem. This is a tricky but the simple part. The ng-init directive only execute once. So your assignment to $stepIndex = workflow.flow.indexOf(data) will not updated when you push a new data to the array/list.
So adding a scope function will fix this problem since Angular will auto call the function when it's returning value changes.
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.workflow = {
flow: [{
"id": "1334f68db820f664",
"step_number": 1,
"tasks": [{
"id": "1334f68e3f20f665"
}]
}, {
"id": "134967a5ba205f5b",
"step_number": 2,
"tasks": [{
"id": "134972c5b420e027"
}]
}, {
"id": "1334f68e7d209ae6",
"step_number": 3,
"tasks": [{
"id": "1334f68ef6209ae7"
}]
}]
};
$scope.insertStep = function() {
var insertStepIndex = 1
var task_data = {
"id": null,
"step_number": (insertStepIndex + 2),
"tasks": []
};
//go through each item in the array
angular.forEach($scope.workflow.flow, function(step, index) {
//if the step number is greater then the place you want to insert it into, increase the step numbers
if (step.step_number > $scope.workflow.flow[insertStepIndex].step_number) step.step_number++;
});
$scope.workflow.flow.splice((insertStepIndex + 1), 0, task_data);
}
// This is a new function which I added to fix the problem
$scope.getIndex = function(data) {
return $scope.workflow.flow.indexOf(data);
};
$scope.toggleHide = function() {
$scope.hide = !$scope.hide;
};
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div ng-click="insertStep()">Insert Step</div>
<br />
<br />
<div ng-click="toggleHide()">Toggle Repeat</div>
<br />
<br />
<div ng-if="!hide">
<div ng-repeat="data in workflow.flow | orderBy:'+step_number'">
{{ workflow.flow[getIndex(data)].step_number }}
</div>
</div>
</div>
var foo = [
{
"id": 12,
"name": "Test"
},
{
"id": 2,
"name": "Beispiel"
},
{
"id": 3,
"name": "Sample"
},
{
"id": 4,
"name": "Test"
},
{
"id": 5,
"name": "Sample value"
},
{
"id": 6,
"name": "Testvalue"
}
];
I am trying to get a simple search input, which shows a couple of listings on ng-repeat. The search is basically a filter which shows searched items in that listing. What I have achieved is when I search something, with $http, it gets back the whole list of foo, and within that it filters. How can I just get the data with my keyword, and the whole JSON? For example if I search sample, how can I get the objects of id 3 and 5 so that I can display a new set of listings, or if I search with ID number 12, I get the object which has id as 12. The search term will be dynamic. I will be giving a $http call on every search as well.
Thanks.
If I understood well, it should work:
(function() {
angular
.module('app', [])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope', '$http'];
function MainCtrl($scope, $http) {
$scope.foo = [
{
"id":12,
"name":"Test"
},
{
"id":2,
"name":"Beispiel"
},
{
"id":3,
"name":"Sample"
},
{
"id":4,
"name":"Test"
},
{
"id":5,
"name":"Sample value"
},
{
"id":6,
"name":"Testvalue"
}
];
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="text" ng-model="search" placeholder="Search">
<ul>
<li ng-repeat="item in foo | filter: search">
<span ng-bind-template="{{item.id}} - {{item.name}}"></span>
</li>
</ul>
</body>
</html>
Note: If you want to perform a $http request based on search input, look at this DEMO.
You can use $filter to achieve this.
function YourController($filter) {
var result = $filter('filter')(foo, {"id":3,"id":5});
};
You can iterate result later.
I've written the following code to read data from json file and draw a graph. now I want to get the data from user through input fields and update the json with new values. I wrote the code to copy the value and made it accessible outside the scope, I just wonder how to update the existent json with the new values.
json looks like this:
{
"nodes" : [
{ "id": 1, "label": "End Product", "level": 0 },
{ "id": 2, "label": "A 1", "level": 1 },
{ "id": 3, "label": "A 2", "level": 1 },
{ "id": 4, "label": "A 3", "level": 1 },
{ "id": 5, "label": "B 1", "level": 2 },
{ "id": 6, "label": "C 1", "level": 3 },
{ "id": 7, "label": "B 2", "level": 2 },
{ "id": 8, "label": "B 3", "level": 2 }
],
"edges" : [
{ "from": 1, "to": 2 },
{ "from": 1, "to": 3 },
{ "from": 1, "to": 4 },
{ "from": 2, "to": 5 },
{ "from": 5, "to": 6 },
{ "from": 3, "to": 7 },
{ "from": 4, "to": 8 }
]
}
var app = angular.module('bomApp', ['bomGraph']);
app.controller('bomController', ['$scope', 'appService', '$rootScope', function ($scope, appService, $rootScope) {
var get = function () {
appService.get().then(function (promise) {
$scope.graph = {
options: {
"hierarchicalLayout": {
"direction": "UD"
},
"edges": {
"style":"arrow-center",
"color":"#c1c1c1"
},
"nodes": {
"shape":"oval",
"color":"#ccc"
}
},
data: {
nodes: promise.nodes,
edges: promise.edges
}
};
});
};
$scope.newNode = {
id: undefined,
label: undefined,
level: undefined,
parent: undefined,
};
$scope.arrNode = {};
$scope.update = function (nodes) {
$scope.arrNode = angular.copy(nodes);
$rootScope.nodex = angular.copy(nodes);
};
$scope.newEdge = {
id: undefined,
from: undefined,
to: undefined
};
$scope.arrEdge = {};
$scope.updateE = function (edges) {
$scope.arrEdge = angular.copy(edges);
$rootScope.edgex = angular.copy(nodes);
};
get();
}]);
app.factory('appService', ['$q', '$http', '$rootScope', function ($q, $http, $rootScope) {
return {
get: function (method, url) {
var deferred = $q.defer();
$http.get('data.json')
.success(function (response) {
deferred.resolve(response);
})
return deferred.promise;
},
};
}]);
<body data-ng-app="bomApp">
<div data-ng-controller="bomController">
<h3>Create Your Own Graph</h3>
<div class="node">
<h4>Nodes:</h4>
<div class="panel">
<label>Id:</label>
<input type="text" id="idNode" data-ng-model="newNode.id"/>
<br />
<label>Label:</label>
<input type="text" id="label" data-ng-model="newNode.label" />
<br />
<label>Level:</label>
<input type="text" id="level" data-ng-model="newNode.level" />
</div>
<div>
<button id="addNode" data-ng-click="update(newNode)">Add</button>
</div>
</div>
<div class="node">
<h4>Edges:</h4>
<div class="panel" >
<label>Id:</label>
<input type="text" id="idEdge" data-ng-model="newEdge.id"/>
<br />
<label>From:</label>
<input type="text" id="from" data-ng-model="newEdge.from"/>
<br />
<label>To:</label>
<input type="text" id="to" data-ng-model="newEdge.to"/>
</div>
<div>
<button id="addEdge" data-ng-click="updateE(newEdge)">Add</button>
</div>
</div>
<div data-custom-dir="" id="graph" data="graph.data" options="graph.options"></div>
<div>
<h3>Monitor The Changes</h3>
<div class="node">
<h4>Nodes:</h4>
<div class="col">
<div id="nodes">
<pre>{{newNode | json}}</pre>
<pre>{{arrNode | json}}</pre>
</div>
</div>
</div>
<div class="node">
<h4>Edges:</h4>
<div class="col">
<div id="edges">
<pre>{{newEdge | json}}</pre>
<pre>{{arrEdge | json}}</pre>
</div>
</div>
</div>
</div>
</div>
</body>
You can add items to a javascript object using .push(). To make an update, you'll have to loop through the object until you find a matching id (or some other value).
Finally, you can use .appendTo() to update the section that indicates what changes have been made.
Example:
$('#addNode').click(function () {
// pseudo code to add item to javascript object:
// 'node' would be presumably nested based on the OP,
// but information on js object name is not provided
var nodeId = $('#idNode').val();
var nodeLabel = $('#label').val();
var nodeLevel = $('#level').val();
nodes.push({
"id": nodeId,
"label": nodeLabel,
"level": nodeLevel,
});
// psudeo code for updating js object
// loop through object to find matching id:
var locate = 0;
for (var i = 0; i < nodes.length; i++) {
if(node[i].id == nodeId){
locate = i;
node[i].label = nodeLabel;
node[i].level = nodeLevel;
}
}
// Adding results to element
var nodesElem = $('#nodes');
var addElem = "<pre> { newNode | " + JSON.stringify(node[locate]) + " }";
addElem.appendTo(nodesElem);
});
If you need it to be able to change existing records try :
$scope.graph.data.nodes[$scope.newNode.id] = $scope.newNode;
and
$scope.graph.data.edges.push($scope.newEdge);
These methods function calls should update the existing data with the newNode and the newEdge