I am writing a small program in Vue.js, but I am getting stuck with an error.
I want the X button to remove each item in a list. I used splice(index,1), but the item isn't being removed. What am I missing?
My HTML:
<div id="app" class="container">
<div class="row">
<div class="col-md-4">
<h1>Add Student</h1>
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" v-model="newStudent.name" class = "form-control" placeholder="Student Name">
</div>
<div class="form-group">
<label for="address">Address</label>
<input type="text" id="address" v-model="newStudent.address" class = "form-control" placeholder="Address">
</div>
<button class="btn btn-success" v-on:click = "addStudent">Add</button>
</div>
<div class="col-md-8">
<h1>All Students</h1>
<table class="table table-striped">
<thead>
<tr>
<td>Name</td>
<td>Address</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr v-for = "student in students">
<td>{{student.name}}</td>
<td>{{student.address}}</td>
<td><button type="button" class="btn btn-danger" v-on:click="deleteStudent($index)">X</button></td>
</tr>
</tbody>
</table>
</div>
</div> <!--End of Row-->
<br>
<br>
<div class="row">
<div class="col-md-12">
<pre>{{ $data | json }}</pre>
</div>
</div>
</div>
My JS:
<script>
new Vue({
el: "#app",
data: {
newStudent: {name: "", address: ""},
students: []
},
methods: {
addStudent: function(){
var name = this.newStudent.name.trim();
var address = this.newStudent.address.trim();
if(name && address){
this.students.push({name: name, address: address});
this.newStudent = {name: "", address: ""};
$("#name").focus();
}
},
deleteStudent: function(index){
this.students.splice(index,1)
}
}
});
</script>
The $index variable was removed in Vue 2. So, you're not passing the index in correctly.
Specify the index variable in the v-for and pass that to the deleteStudent method instead:
<tr v-for="student, index in students">
<td>{{student.name}}</td>
<td>{{student.address}}</td>
<td>
<button
type="button"
class="btn btn-danger"
v-on:click="deleteStudent(index)"
>X</button>
</td>
</tr>
This is covered in the documentation on list rendering in Vue.
Related
My code is like this: when you check the 'hide' column, the whole row is hidden. I also have a 'Show All' checkbox. When I check it, all rows (including the hidden ones) are shown. But when I uncheck it, all rows disappear. How can I make it so only the hidden rows disappear when I uncheck 'Show All', and the other rows still remain visible?
<body ng-app="myApp" ng-controller="myController">
<h1>Fruits in Vietnam</h1>
<hr>
<form name="myForm">
<div class="input-group input-group-lg">
<input type="text" class="form-control" name="mdfruitname" id="txtfruitname" ng-model="mdfruitname"
required>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" ng-click="addnew()"
ng-disabled="myForm.mdfruitname.$pristine || myForm.mdfruitname.$invalid">Add
</button>
</div>
</div>
</form>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Hide</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="fruit in fruitnameDetail" ng-show="showall" ng-hide="hidef">
<td>{{fruit.fruitname}}</td>
<td><input type="checkbox" ng-model="hidef"></td>
<td>
<a class="btn btn-xs delete-record" ng-click="removefruitname($index)">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
</tr>
</tbody>
</table>
<div><input type="checkbox" ng-model="showall"><span>SHOW ALL</span></div>
</body>
<script>
var app = angular.module("myApp", []);
app.controller('myController', function ($scope, $window) {
$scope.fruitnameDetail = [
{
"fruitname": "Banana"
},
{
"fruitname": "Mango"
},
{
"fruitname": "Orange"
}
];
$scope.addnew = function () {
var fruitnameDetail = {
fruitname: $scope.mdfruitname
};
$scope.fruitnameDetail.push(fruitnameDetail);
$scope.mdfruitname = '';
};
$scope.removefruitname = function (index) {
var name = $scope.fruitnameDetail[index].fruitname;
if ($window.confirm("Do you want to delete " + name + " ?")) {
$scope.fruitnameDetail.splice(index, 1);
}
};
});
</script>
Do not use ng-show and ng-hide at the same time. Just change a little bit your condition for ng-repeat. Here the example that should work:
<body ng-app="myApp" ng-controller="myController">
<h1>Fruits in Vietnam</h1>
<hr>
<form name="myForm">
<div class="input-group input-group-lg">
<input type="text" class="form-control" name="mdfruitname" id="txtfruitname" ng-model="mdfruitname"
required>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" ng-click="addnew()"
ng-disabled="myForm.mdfruitname.$pristine || myForm.mdfruitname.$invalid">Add
</button>
</div>
</div>
</form>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Hide</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="fruit in fruitnameDetail" ng-show="showall || !hidef">
<td>{{fruit.fruitname}}</td>
<td><input type="checkbox" ng-model="hidef"></td>
<td>
<a class="btn btn-xs delete-record" ng-click="removefruitname($index)">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
</tr>
</tbody>
</table>
<div><input type="checkbox" ng-model="showall"><span>SHOW ALL</span></div>
</body>
I want to display two columns from two different tables.
I have table "offices" and "cash_desks"
Table "offices" have the column "name" which I want to display.
Table "cash_desks" have the columns "name" and "office_id"(which refers to offices id).
I want to display offices name and cash_desks name in HTML table.
Here is my HTML code:
<table class="table">
<tr ng-repeat="cash_desks in items" ng-click="editItem(cash_desks)">
<td>{{cash_desks.name}}</td>
<td>{{offices.name}}</td>
</tr>
</table>
<label><input type="checkbox" ng-model="myVar">Редактирай офис</label>
<div ng-show="myVar">
<div class="form">
<form ng-submit="saveItem(cash_desksForm.$valid)" name="cash_desksForm">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="offices_name">Код на валута</label>
<input type="text" class="form-control" required ng-model="activeItem.name" placeholder="Офис.." />
</div>
<div class="form-group">
<label for="value_name">Локация на офис</label>
<input type="text" class="form-control" id="password" ng-model="activeItem.location" />
</div>
</div>
</div>
<button class="btn btn-primary" ng-disabled="cash_desksForm.$invalid" type="submit">Save</button>
<!--<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Добавяне на нов</button>-->
</form>
</div>
</div>
And Angular Code:
app.controller("CashDesksCtrl", function($rootScope, $scope){
$scope.items = [];
$scope.editMode = false;
$scope.activeItem = false;
$scope.refresh = function () {
$scope.items = [];
window.defaultAdapter.query("SELECT offices.name,cash_desks.name FROM offices LEFT JOIN cash_desks ON offices.id = cash_desks.office_id LIMIT 8", { type: Sequelize.QueryTypes.SELECT})
.then(cash_desks => {
$scope.items = cash_desks;
$scope.$apply();
})
};
You have same key (name) from your select , try to use alias to make them differents.
<table class="table">
<tr ng-repeat="itemin items" ng-click="editItem(cash_desks)">
<td>{{item.cash_desk_name}}</td>
<td>{{item.office_name}}</td>
</tr>
</table>
<label><input type="checkbox" ng-model="myVar">Редактирай офис</label>
<div ng-show="myVar">
<div class="form">
<form ng-submit="saveItem(cash_desksForm.$valid)" name="cash_desksForm">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="offices_name">Код на валута</label>
<input type="text" class="form-control" required ng-model="activeItem.name" placeholder="Офис.." />
</div>
<div class="form-group">
<label for="value_name">Локация на офис</label>
<input type="text" class="form-control" id="password" ng-model="activeItem.location" />
</div>
</div>
</div>
<button class="btn btn-primary" ng-disabled="cash_desksForm.$invalid" type="submit">Save</button>
<!--<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Добавяне на нов</button>-->
</form>
</div>
</div>
app.controller("CashDesksCtrl", function($rootScope, $scope){
$scope.items = [];
$scope.editMode = false;
$scope.activeItem = false;
$scope.refresh = function () {
$scope.items = [];
window.defaultAdapter.query("SELECT offices.name as office_name,cash_desks.name as cash_desk_name FROM offices LEFT JOIN cash_desks ON offices.id = cash_desks.office_id LIMIT 8", { type: Sequelize.QueryTypes.SELECT})
.then(cash_desks => {
$scope.items = cash_desks;
$scope.$apply();
})
};
I am using HTML webapp form and the fields are selected as a mandatory (required) but I am able to submit the data without updating required fields.
Below are my detailed HTML and gs script, help me to fix the concern
<script>
function submitForm(btnClicked) {
$("button").attr("disabled", true);
var jsonObj = {};
jsonObj["Project Name"] = $("#ProjectName").val();
jsonObj["updateBtn"] = $(btnClicked).text();
google.script.run.withSuccessHandler(afterSaving).saveDate(jsonObj);
}
function afterSaving() {
alert("Thanks, Your response has been recorded");
$("button").attr("disabled", false);
}
</script>
<form action="" method="get">
<div class="container">
<table class="table table-bordered" width="" style="width:54%">
<thead>
<tr class="one">
<th width="33%">
Project Name
</th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="form-group txt">
<input name="" type="text" placeholder="" class="form-control input-md" id="ProjectName" required="required">
</div></td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<div class="col-md-2 col-md-offset-5">
<div class="form-group">
<button style="display:block;width:100%" id="updateBtn" name="singlebutton" class="btn btn-success" type="submit" onclick="submitForm()" >Save</button>
</div>
</div>
</div>
You need to remove onclick="submitForm()" and instead add onsubmit="submitForm()" in the form tag.
<form onsubmit="return submitForm()">
Also, add return false; to submitForm function.
There is three forms in same Html. In the first form there is a radio button. If one button got selected the second form will be appear. In the second form there is a button. If that button clicked third form will be appear, in this form i need to show the id and the name which was selected in first form. How can i do that?
Html
<form name="firstform">
<table class="table">
<tr>
<th>Select</th>
<th>Name</th></tr>
<tr ng:repeat="d in dList">
<td><input type="radio" ng-click="Selected(d.Id)" name="Selection" /></td>
<td>{{d.Name}}</td></tr>
</table>
</form>
<form name="secondform">
<table class="table">
<td>racename</td>
<td>race</td>
<tr><td><input type="submit" class="btn btn-default" value="Continue" ng-click="savedetails()" /></td>
</tr>
</table>
</form>
<form name="thirdform">
<table class="table">
<tr>
<td>id</td>
<td>name</td></tr>
<tr><td>{{Id}}</td>
<td>{{name}}</td></tr>
</table>
</form>
angular Controller
$scope.Selected = function (id, name) {
$scope.firstform= false;
$scope.secondform= true;
console.log(id);
}
$scope.savedetails= function () {
$scope.firstform= false;
$scope.secondform= false;
$scope.thirdform= false;
}
As you see we can use some condition in our HTML with ng-if or ng-show and ng-hide.
The different between ng-if and ng-hide is when you try to use ng-if you can't get the form name because the element not exist.
var app = angular.module("app", []);
app.controller("ctrl", ["$scope", function($scope) {
$scope.form = {}
$scope.options = [{
id: 01,
name: "option 1",
value: 1
},
{
id: 02,
name: "option 2",
value: 2
}
]
$scope.saveDetails = function() {
$scope.thirdformDisplay = true;
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<form name="firstform">
<h1>form 1</h1>
<div ng-repeat="option in options">
<label>{{option.name}}</label>
<input type="radio" ng-model="form.optionFormValue" ng-value="option.value" ng-click="form.optionFormId = option.id" name="Selection" />
</div>
<button ng-click="form = {};thirdform = false;">clear form 1</button>
</form>
<form name="secondform" ng-show="form.optionFormValue">
<h1>form 2</h1>
<label>form 1 details:</label>
<ul>
<li>form name: {{firstform.$name}}</li>
<li>form option value: {{form.optionForm}}</li>
<li>form option value: {{form.optionFormId}}</li>
</ul>
<br />
<input type="submit" value="Continue" ng-click="saveDetails()" />
</form>
<form name="thirdform" ng-show="thirdformDisplay">
<h1>form 3</h1>
<ul>
<li>form 1 name: {{firstform.$name}}</li>
<li>form 2 name: {{secondform.$name}}</li>
</ul>
</form>
</div>
Since ngRepeat is isolated scope , you can use ControllerAs to set values in controller from inside ngRepeat.
<body ng-controller="MainCtrl as main">
<form name="firstform">
<table class="table">
<tr>
<th>Select</th>
<th>Name</th></tr>
<tr ng-repeat="d in main.dList">
<td><input type="radio" ng-click="main.selectItem(d)" name="Selection" >{{d.value}}</input></td>
<td>{{d.Name}}</td></tr>
</table>
</form>
<form name="secondform">
<table class="table">
<td>racename</td>
<td>race</td>
<tr><td><input type="submit" class="btn btn-default" value="Continue" ng-click="main.savedetails()" /></td>
</tr>
</table>
</form>
<form name="thirdform" ng-show="main.showForm">
<table class="table">
<tr>
<td>id</td>
<td>name</td></tr>
<tr><td>{{main.selected.id}}</td>
<td>{{main.selected.value}}</td></tr>
</table>
</form>
</body>
And Controller as below
app.controller('MainCtrl', function($scope) {
this.dList = [{
id: 1,
value: "a"
}, {
id: 2,
value: "b"
}, {
id: 3,
value: "c"
}];
this.savedetails=function(){
this.showForm=true;
};
this.selectItem=function(item){
this.selected=item
}
});
Please check this below plunker
https://plnkr.co/edit/WGgUeO76A2VzQNVnBicb?p=preview
You can find the selected Id value of the first form in the controller by using $scope.form.firstFormSelectedValue in the following way:
<form name="1st form">
<table class="table">
<tr>
<th>Select</th>
<th>Name</th></tr>
<tr ng:repeat="d in dList">
<td><input type="radio" ng-model="form.firstFormSelectedValue" ng-click="Selected(d.Id)" name="Selection" ng-attr-value="{{d.Id}}" /></td>
<td>{{d.Name}}</td></tr>
</table>
</form>
<form name="secondform" ng-show="form.optionFormValue">
<h1>form 2</h1>
<label>form 1 details:</label>
<ul>
<li>form name: {{firstform.$name}}</li>
<li>form option value: {{form.optionForm}}</li>
<li>form option value: {{form.optionFormId}}</li>
</ul>
<br />
<input type="submit" value="Continue" ng-click="saveDetails()" />
</form>
<form name="thirdform" ng-show="thirdformDisplay">
<h1>form 3</h1>
<ul>
<li>form 1 name: {{firstform.$name}}</li>
<li>form 2 name: {{secondform.$name}}</li>
<li>form 1 Id: {{form.firstFormSelectedValue}}</li>
</ul>
</form>
When i start typing a name of student, like "M", the list of student needs to include only students, name of that are starting on letter "M" and so on rest of the word. But input value .length is undefined all the time.
(function() {
var app = angular.module('app', []);
app.controller('DataController', function() {
this.students = arr;
this.compare = function() {
for (var i = 0; i < this.text.length; i++) {
if (this.text[i] == this.students.name[i]) {
alert(this.text);
return true;
}
}
}
});
var arr= [{
name: 'Azurite',
price: 2.95
}, {
name: 'Bloodstone',
price: 5.95
}, {
name: 'Zircon',
price: 3.95
}];
}());
HTML
<div class="container-fluid">
<div class="row-fluid">
<input class="col-md-12 col-xs-12" type="text" placeholder="Search people by name..." ng-model='text' ng-change='data.students.name'>
<div class="buttons">
<button class="btn btn-sort">Sort by name</button>
<button class="btn btn-sort">Sort by age</button>
<button ng-click='data.click()' class="btn btn-danger">Reset</button>
</div>
</div>
<!--Main content-->
<div class="main-table col-sm-8 col-md-7 col-md-offset-1 col-lg-7 col-lg-offset-1">
<table class="table table-hover">
<thead>
<tr>
<th class="text-center">Image</th>
<th>Name</th>
<th>Age</th>
<th>Phone</th>
</tr>
</thead>
<tbody ng-repeat='student in data.students' ng-show='data.compare()'>
<tr>
<td>
<img src="/img/cat.svg" alt="">
</td>
<td>{{student.name}}</td>
<td>41</td>
<td>sieg#example.com</td>
</tr>
</tbody>
</table>
</div>
</div>
The angular way to do this is to use the filter feature built in to angular.
first, the text box you want to type your search into:
<input class="col-md-12 col-xs-12" type="text"
placeholder="Search people by name..." ng-model='data.text'>
Note that this only needs an ng-model value.
Next, the ng-repeat:
<tbody ng-repeat='student in data.students | filter:data.text'>
Nothing is necessary at all in the controller.
http://plnkr.co/edit/aoR2ZkrgjCvhC60Ky0QA?p=preview