I have this edit form on my index.html
<tbody>
<tr ng-repeat="client in vm.clients | orderBy: '-ClientID'" ng-dblclick="vm.clickEditAction(client)">
<td><img src="/img/trash.png" style="cursor: pointer;" ng-click="vm.removeAction(client)" alt="Remove {{ client.ClientID }}" /></td>
<td>{{ client.ClientID }}</td>
<td>
<span data-ng-hide="editMode">{{ client.ClientName }}</span>
<input type="text" data-ng-show="editMode" data-ng-model="client.ClientName" data-ng-required />
</td>
<td>{{ client.Country }}</td>
<td>{{ client.Email }}</td>
<td><button type="submit" data-ng-hide="editMode" data-ng-click="editMode = true; editAppKey(entry)" class="btn btn-default">Edit</button>
<button type="submit" data-ng-show="editMode" data-ng-click="editMode = false" class="btn btn-default">Save</button>
</td>
</tr>
</tbody>
However, every time I edit the field and submit it, it doesn't update the field in the table database.
Here's my controller save:
vm.saveAction = function () {
clientService.save(vm.clients, function (data) {
if (data.success) {
toastr.success('changes were saved.', 'Success');
vm.clients = data.records;
} else {
toastr.error('Error saving :\n\n' + data.errorMessage, 'Error', {
timeOut: 0
});
}
}, function (error) {
toastr.error('Error saving :\n\n' + error, 'Error', {
timeOut: 0
});
});
}
Related
how to loop the data from database my route in laravel is Route::get('api/contacts', [ContactController::class, 'index'])->name('contact.index'); and im trying to display all the list but im confuse with the js code someone expert here and please help me
class ContactController extends Controller
{
/**
* Display a listing of the resource.
*
* #return \Illuminate\Http\Response
*/
public function index()
{
$contacts = Contact::all();
// return view('contacts.index', compact('contacts'));
return response()->json(compact('contacts'));
}
<script>
import axios from "axios";
export default {
data() {
return {
form: {
first_name: "",
last_name: "",
email: "",
city: "",
country: "",
job_title: "",
},
errorMessage: "",
user: "",
};
},
methods: {
processCreate() {
this.errorMessage = "";
axios
.post("/api/contacts/index")
.then((response) => {})
.catch((error) => {
this.errorMessage = error.response.data.message;
console.log("error", error.response);
});
console.log(response);
},
},
mounted() {
// console.log(this.form)
},
};
</script>
<template>
<div class="row">
<div class="col-sm-12">
<h1 class="display-3">Contacts</h1>
<table class="table table-striped">
<thead>
<tr>
<td>ID</td>
<td>Name</td>
<td>Email</td>
<td>Job Title</td>
<td>City</td>
<td>Country</td>
<td colspan="3">Actions</td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
Show
</td>
<td>
Edit
</td>
<td>
<form method="post" action="">
<button class="btn btn-danger" type="submit">Delete</button>
</form>
</td>
</tr>
</tbody>
</table>
<div>
<router-link :to="{ name: 'contactsCreate' }">New Contact</router-link>
</div>
</div>
</div>
</template>
you should have a variable for your contacts in vuejs instance
like contacts : []
and when you return your data in controller with axios to vuejs, you have to set response to that variable:
.then(response => {
this.contacts = response.data;
}
)
and then wherever you want your data to be shown :
<tr v-for="item in this.contacts">
<td>#{{item .name}}</td>
<td>#{{item .subject}}</td>
</tr>
Step 1: Load data from rest api
methods: {
loadContactsFromAPI() {
var self = this;
return axios
.get("https://jsonplaceholder.typicode.com/users")
.then(function (response) {
self.contacts = response.data;
})
.catch(function (error) {
return error;
});
},
}
Step 2: Display the contact list to html template
<table class="table table-striped">
<thead>
<tr>
<td>ID</td>
<td>Name</td>
<td>Email</td>
<td>Job Title</td>
<td>City</td>
<td>Country</td>
<td colspan="3">Actions</td>
</tr>
</thead>
<tbody>
<tr :key="index" v-for="(contact, index) in contacts">
<td>{{ index + 1 }}</td>
<td>{{ contact.name }}</td>
<td>{{ contact.email }}</td>
<td>{{ contact.company.name }}</td>
<td>{{ contact.address.street }}</td>
<td>{{ contact.address.city }}</td>
<td>
Show
</td>
<td>
<a
href="#"
class="btn btn-primary"
#click.prevent="editContact(contact, index)"
>Edit</a
>
</td>
<td>
<button
class="btn btn-danger"
type="button"
#click="deleteContact(index)"
>
Delete
</button>
</td>
</tr>
</tbody>
</table>
Step 3: Implemented Edit or add new contact in html template
<div class="row" v-else-if="!showListContact">
<div>
<label>Name</label>
<input type="text" v-model="contact.name" />
</div>
<div>
<label>Email</label>
<input type="text" v-model="contact.email" />
</div>
<div>
<label>Job Title</label>
<input type="text" v-model="contact.company.name" />
</div>
<div>
<label>City</label>
<input type="text" v-model="contact.address.city" />
</div>
<div>
<button type="button" #click="saveContact">Save</button>
</div>
</div>
Step 4: Add Edit, Delete and Create new contact methods inside script
editContact(contact, index) {
this.showListContact = false;
this.selectedIndex = index;
this.contact = contact;
},
addNewContact() {
this.showListContact = false;
this.selectedIndex = "";
this.contact = {
company: {},
address: {},
};
},
saveContact() {
if (this.selectedIndex) {
this.contacts[this.selectedIndex] = this.contact;
} else {
this.contacts.push(this.contact);
}
// You have to make a call to backend api to save in db
this.showListContact = true;
},
deleteContact(index) {
if (confirm("Are you sure wants to delete the contact")) {
this.contacts.splice(index, 1);
// You have to make a call to backend api to delete in db
}
},
DEMO
For more details about Vue, Vuex, Form validations, Router, CRUD Operations, Table sorting, filtering refer the below project link
Complete Vue project with most of the features
here is the code
the view code:
<input type="text" class="form-control" ng-model="model.org" />
<input type="button" class="btn btn-primary" value="Load Repos" ng-click="getRepos(model.org)" ng-hide="model.repos" />
<div class="col-md-6">
<table class="table table-striped" ng-show="model.repos">
<tr>
<th>Name</th>
<th>Language</th>
<th></th>
</tr>
<tr ng-repeat="r in model.repos">
<td>
<h4>{{r.name}}</h4> {{r.description}}
</td>
<td>{{r.language}}</td>
<td><input type="button" class="btn btn-success" ng-click="loadDetail(r.name)" value="Detail"> </td>
</tr>
</table>
</div>
and this is the inside the controller:
$scope.model = {
number: 0,
result: 'Ready'
};
$scope.getRepos = getRepos;
function getRepos(org) {
$http.get('https://api.github.com/orgs/org/repos').then(function(response) {
$scope.model.repos = response.data;
}, function(response) {
alert(response.error);
$scope.model.repos = 'Error: ' + response.data.message;
})
}
when I click the button that has the ng-click="getRepos(javascript); I get undefined but if I copied this link https://api.github.com/orgs/javascript/repos to a browser it returns data!
what am I missing here?
I think you wanted to pass the parameter to getRepos in your GET url, like:
function getRepos(org) {
$http.get('https://api.github.com/orgs/' + org + '/repos').then(function(response) {
$scope.model.repos = response.data;
}, function(response) {
alert(response.error);
$scope.model.repos = 'Error: ' + response.data.message;
})
}
I'm using the angular + bootstrap to create a table and for each row, it will have a popover button. What I want to do is to change 'Show Password' to 'Hide Password' when the popover is shown, and change back when the popover is closed.
<tr ng-repeat="entry in data">
<td>{{ entry.site }}</td>
<td>{{ entry.username }}</td>
<td>
<button popover-placement="right" uib-popover="{{calculatePassword(entry)}}" class="btn btn-primary btn-sm">Show Password</button>
</td>
</tr>
I tried to use lines such as 'displayed? "Show Password":"Hide Password"' but I can't find a proper spot to toggle 'displayed'. I can't find a built-in feature of uib-popover to do that neither. Please help. Thanks!
You could use ng-click to toggle a variable each time the button is clicked and change the text accordingly.
<button ng-click="entry.passwordDisplayed = !entry.passwordDisplayed">
{{entry.passwordDisplayed ? 'Hide' : 'Show'}} Password
</button>
var app = angular.module("app", ["ui.bootstrap"]);
app.controller("controller", function($scope, $sce) {
$scope.data = [
{
site: "Facebook",
username: "jsmith",
password: "abc123"
}
];
var trusted = {};
$scope.htmlPopover = function(entry) {
var html = '<b>Password:</b> ' + entry.password;
return trusted[html] || (trusted[html] = $sce.trustAsHtml(html));
};
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.min.js"></script>
<div ng-app="app" ng-controller="controller">
<div class="wrapper">
<table class="table">
<thead>
<tr>
<th>Site</th>
<th>Password</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="entry in data">
<td>{{ entry.site }}</td>
<td>{{ entry.username }}</td>
<td>
<button ng-click="entry.passwordDisplayed = !entry.passwordDisplayed" class="btn btn-primary btn-sm" uib-popover-html="htmlPopover(entry)" class="btn btn-default">{{entry.passwordDisplayed ? 'Hide' : 'Show'}} Password</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Adding items from one array to a new array using:
$scope.listItems = [];
$scope.addToList = function(item) {
$scope.listItems.push(item);
console.log($scope.listItems);
};
<tr ng-repeat="x in data">
<td><{{ x.id }}</td>
<td><button type="button" ng-click="addToList(x.id)">Add to</button></td>
</tr>
Then printing the new array:
<tr ng-repeat="item in listItems">
<td>{{item.id}}</td>
</tr>
Would it be possible to change the attribute names of the new listItems array using user input?
Sure its possible. But not the way your code is written. You need to pass the object to the function, not the id.
<tr ng-repeat="x in data">
<td>{{ x.id }}</td>
<td><input type="text" ng-model="newVal"/></td> <!--this property can be changed by user-->
<td><button type="button" ng-click="addToList(x, newVal)">Add to</button></td>
</tr>
and in the controller function:
$scope.addToList = function(item, newVal) {
var newItem = item;
newItem.id = newVal;
$scope.listItems.push(item);
console.log($scope.listItems);
};
You could definitely do that, But for that you need to pass in the object in itself not x.id.
Here is a sample working solution.
var app = angular.module("sampleApp", []);
app.controller("sampleController", ["$scope",
function($scope) {
$scope.data = [{
id: "City-1"
}, {
id: "City-2"
}, {
id: "City-3"
}, {
id: "City-4"
}, {
id: "City-5"
}];
$scope.listItems = [];
$scope.addToList = function(item) {
$scope.listItems.push(item);
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="sampleApp">
<div ng-controller="sampleController">
<table>
<tr ng-repeat="x in data">
<td>
{{ x.id }}</td>
<td>
<button type="button" ng-click="addToList(x)">Add to</button>
</td>
</tr>
</table>
New List:
<table>
<tr ng-repeat="item in listItems track by $index">
<td>
{{ item.id }}</td>
<td>
<button type="button" ng-click="addToList(x)">Add to</button>
</td>
</tr>
</table>
</div>
</div>
I have a table fetched from php script. given below code work perfectly when i tick the box it push ids successfully but while splice it didn't work well.
it splice array too when i tick and untick only single row. but when i select multiple rows it push again and again even when i untick. please check the code.
$scope.exampleArray = [];
$scope.pushInArray = function(id) {
// get the input value
/* var inputVal = id;*/
var index = $scope.exampleArray.indexOf(id);
if( index ){
$scope.exampleArray.push(id);
}else { $scope.exampleArray.splice(index, 1); }
$scope.deleteBulk = function(){
if(confirm("Are you sure you want to delete " + $scope.exampleArray.length + " record(s))?")){
$http.post('http://localhost/angular-code-crud/index.php/user/bulk_delete_user',
{'id':$scope.exampleArray}).success(function(){
$scope.displayUsers();
});
}
};
};
<table class="table table-striped table-hover table-condensed">
<thead>
<tr>
<th></th>
<th ng-click="sort('name')">Name
<span class="glyphicon sort-icon" ng-show="sortKey=='name'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></th>
<th ng-click="sort('gender')">Gender<span class="glyphicon sort-icon" ng-show="sortKey=='gender'" ng-class="{' glyphicon glyphicon-chevron-up':reverse,' glyphicon glyphicon-chevron-down':!reverse}"></span>
<th ng-click="sort('email')">Email<span class="glyphicon sort-icon" ng-show="sortKey=='email'" ng-class="{' glyphicon glyphicon-chevron-up':reverse,' glyphicon glyphicon-chevron-down':!reverse}"></span></th>
<th>Address</th>
<th>Phone</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<!-- <tr ng-repeat="user in users | filter:searchUser | orderBy:sortKey:reverse | filter:paginate"> -->
<tr ng-repeat="user in users|orderBy:sortKey:reverse|filter:searchUser " >
<td><!-- <input type="checkbox" ng-click="deleteBulk(user.id)" ng-true-value="{{user.id}}" ng-checked="master" checklist-model="user.id" checklist-value="{{user.id}}">{{ user.id }} -->
<div class="checkbox">
<label>
<input type="checkbox" name="arrExample" ng-model="arrInput" ng-change='pushInArray(user.id)' >
</label>
</div>
</td>
<td>{{ user.name }}</td>
<td>{{ user.gender }}</td>
<td>{{ user.email }}</td>
<td>{{ user.address }}</td>
<td>{{ user.phone }}</td>
<td>
<button class="btn btn-primary" ng-click="updateData(user.id, user.name, user.gender, user.email, user.address, user.phone)">Edit <i class="material-icons">mode_edit</i></button>
<button class="btn btn-danger" ng-click="deleteData(user.id)">Delete <i class="material-icons">delete</i></button>
</td>
</tr>
</tbody>
</table>
sorry for bad English.
Nevermind i found where was bug.
$scope.exampleArray = [];
$scope.pushInArray = function(id) {
// get the input value
/* var inputVal = id;*/
//$scope.exampleArray.push(id);
var index = $scope.exampleArray.indexOf(id);
console.log(index);
if(index === -1 ){ //this is where i have bug. match the condition with -1
$scope.exampleArray.push(id);
} else { $scope.exampleArray.splice(index, 1);}
$scope.deleteBulk = function(){
if(confirm("Are you sure you want to delete " + $scope.exampleArray.length + " record(s))?")){
$http.post('http://localhost/angular-code-crud/index.php/user/bulk_delete_user',
{'id':$scope.exampleArray}).success(function(){
$scope.displayUsers();
});
}
};
};
Hope this helps
JS :
$scope.pushInArray = function(data) {
var index = $scope.exampleArray.indexOf(data.id);
if(data.checked) {
if( index === -1 ) {
$scope.exampleArray.push(data.id);
}
} else {
$scope.exampleArray.splice(index, 1);
}
}
HTML : change input type="checkbox" line to below
<input type="checkbox" name="arrExample" ng-model="user.checked" ng-change='pushInArray(user)' >
change condition index
$scope.pushInArray = function (id) {
var index = $scope.exampleArray.indexOf(id);
if (index <= -1) {
$scope.exampleArray.push(id);
} else
$scope.exampleArray.splice(index, 1);
};
};