I've started recently working with angular and node.js. I'm trying to populate the content of a json file on some html forms depending on the option selected on a drop down list. I managed to do that but the problem is as soon as I change the content of the form manually, if I want to load the value that it was before (selecting the option from the drop down list) the value of the form doesn't change keeping the one I put manually.
Does anybody know if there's a way to fix that?
Thanks in advance.
Sandra.
Here it's my code:
- json file: content that I want to populate on the forms
[
{
"host": "server1",
"user": "dan",
"pwd": "123456",
"remotedir": "OUT",
"localdir": "65_cargo/dmshared",
"pattern":"FNVAC",
"archive": "0",
"monitor": "2"
},
{
"host": "ftp.xmap.com",
"user": "pront",
"pwd": "x14ck",
"remotedir": "OUT",
"localdir": "107_sss/dmshared",
"pattern":"csv",
"archive": "0",
"monitor": "2"
}
]
-html file: website
<!doctype html>
<html ng-app="gtApp">
<head>
<!--script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script-->
<script data-require="angular.js#1.0.x" src="http://code.angularjs.org/1.0.7/angular.min.js" data-semver="1.0.7"></script>
<script src="ftpsites.js" type="text/javascript"></script>
</head>
<body>
<div ng-controller="ftpSitesCtrl">
<h1>TTS GetTrack Control Panel</h1>
<h2>Total FTP Sites {{ getTotalSites() }}</h2>
<p>Select Site</p>
<select ng-model="selectedItem" ng-options="item.host for item in ftpsites">
</select>
<div>
<p>Edit Site Details</p>
<form>
<table>
<tr>
<td>Host</td>
<td><input type="text" value="{{selectedItem.host}}"/></td>
</tr>
<tr>
<td>User Name</td>
<td><input type="text" value="{{selectedItem.user}}"/></td>
</tr>
<tr>
<td>Password</td>
<td><input type="text" value="{{selectedItem.pwd}}"/></td>
</tr>
<tr>
<td>Remote Directory</td>
<td><input type="text" value="{{selectedItem.remotedir}}"/></td>
</tr>
<tr>
<td>Local Directory</td>
<td><input type="text" value="{{selectedItem.localdir}}"/></td>
</tr>
<tr>
<td>File Pattern</td>
<td><input type="text" value="{{selectedItem.pattern}}"/></td>
</tr>
<tr>
<td>Archive</td>
<td><select><option selected>No</option><option>Yes</option></selected></td>
</tr>
<tr>
<td>Monitor (Days)</td>
<td><select><option="{{selectedItem.monitor}}"></option></selected></td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
js file: logic
var gtApp = angular.module('gtApp', []);
gtApp.controller('ftpSitesCtrl', function($scope, $http){
$http.get('ftpsites.json').success(function (data){
$scope.ftpsites = data;
});
$scope.getTotalSites = function(){
return $scope.ftpsites.length;
}
$scope.populateData = function(){
$scope.host=ftpsites.host;
//return $scope;
}
});
On each of the inputs change "value" to "ng-model" (no curly brackets)
value - one time bind, prints the value to the placeholder
ng-model - two way binding to the model object
Sample
<td><input type="text" ng-model="formSelectedItem.pattern"/></td>
EDIT:
try add this code on your controller:
$scope.formSelectedItem = {};
$scope.$watch('selectedItem', function(newVal) {
$scope.formSelectedItem = newVal;
});
Notice the change in the ng-model attribute
Related
In my MVC 5 Web App I use footable. In a table I have fields radio buttons for example that are built the form.
here is the code:
<thead>
<tr>
<th></th>
#foreach (var labelfreqdep in ViewBag.rbFreqDep)
{
<th style="text-align:center;" data-breakpoints="xs sm">
<label for="FrequencyID">#labelfreqdep.FrequencyDescription</label>
</th>
}
<th data-breakpoints="xs sm"></th>
</tr>
</thead>
<tbody>
<tr>
<td>First Chooses</td>
#foreach (var freqdep in ViewBag.rbFreqDep)
{
<td class="rd">
<input type="radio" name="A3_1" id="A3_1" value="#freqdep.FrequencyDescription" data-val="true" data-val-required="Please select">
</td>
}
<td class="rd">#Html.ValidationMessageFor(model => model.A3_1, "", new { #class = "text-danger" })</td>
</tr>
</tbody>
</table>
I also use validation for empty fields with data-val="true". The problem is that doesn't display the "Please select" message in mobile view. It works ok for desktop view. When I have expanded the tr with the plus icon the message appears. Can we just expand the rows on submit so the message to be displayed?
Any idea?
Edited
I used
$("#survey_form").submit(function (event) {
$('.surveytable').footable({
"expandAll": true
});
});`
It expands the rows on submit but it doesn't show the validation errors
For anyone who has the same issue, I solved it by giving an id to the button and then handle it through jquery
<script type="text/javascript">
jQuery(function($){
$('.surveytable').footable()
$("#survey_btn").click(function (event) {
$('.surveytable').footable({
"expandAll": true
});
});
});
</script>
I am trying to use ng-click inside table but its not working, however outside the table its working fine.
Below is HTML
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Section</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in products">
<td>{{product.ID}}</td>
<td>{{product.Name}}</td>
<td>{{product.Section}}</td>
<td><input type="button" name="name" value="Delete" class="btn btn-danger" ng-click="deleteProduct({{product.ID}});" /></td>
</tr>
</tbody>
</table>
On click of Delete button deleteProduct method doesn't call.
Problems :
You are traversing through a collection/object named rules and getting single item as rule. So you should access each single items properties with rule.yourProperty. How did product come here?
You don't need any double curly braces to for ng-click function parameters. Simply pass the property of the object. ng-click directive works this way.
HTML :
<div ng-controller="mainCtrl">
<table class="table table-striped">{{msg}}
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Section</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="rule in rules">
<td>{{rule.ID}}</td>
<td>{{rule.Name}}</td>
<td>{{rule.Section}}</td>
<td><input type="button" name="name" value="Delete" class="btn btn-danger" ng-click="deleteProduct(rule.ID)" /></td>
</tr>
</tbody>
</table>
</div>
angular :
angular.module('myapp', []).controller('mainCtrl', ['$scope', function($scope){
var data = [
{
ID : "1",
Name : "A1",
Section : "A1"
},
{
ID : "2",
Name : "A2",
Section : "A2"
},
{
ID : "3",
Name : "A3",
Section : "A3"
},
{
ID : "4",
Name : "A4",
Section : "A4"
}
];
$scope.rules = data;
$scope.deleteProduct = function(id){
alert(id);
// delete your item here
};
}]);
jsFiddle
Try this:-
ng-click="deleteProduct(product.ID)"
i have a table that loads multiple checkboxes and selectboxes.when i click on one checkbox or select box it automatically selects every other box on the table .i want to have the option to choose either one checkbox or select box per row on it own.
<tr id="TableBody" ng-repeat="code in Register.RegisterDetails">
<td>{{$index+1}}</td>
<td ng-bind="code .CodeID"><input type="text" ng-model="Register.CodeID" /></td>
<td ng-bind="code .name"><input type="text" ng-model="Register.Firstname" /></td>
<td ng-bind="code .Lastname"><input type="text" ng-model="Register.Lastname" /></td>
<td><input type="checkbox" ng-model="Register.Presentstatus" id="PresentCheckbox" name="PresentCheckbox" /></td>
<td><select id="reasons" name="reasons" ng-model="Register.Category" ng-disabled="Register.Presentstatus" ng-clicked="Register.Presentstatus && O" ></td>
</tr>
my module that gets my data
function Register(){ self.RegisterDetails = function () {
var params = { pass params here };
return $http.get
{
url: GetRegisterDetails,
params: params,
success: function (data) {
self.RegisterDetails = data.data;
}
});
}
my controller
ngAppModule.controller('RegisterController',['$scope','$http',function($scope,$http)
{
var self = this;
$scope.Register = new Register($http);
}]);
all the above code works fine. i just dont know how to check a single box per row.sorry im new to this site
The main problem you're running into is you are binding to the wrong this inside your ng-repeat.
Your HTML currently repeats a checkbox for every code, but binds that to the same object property Register.Presentstatus.
<tr id="TableBody" ng-repeat="code in Register.RegisterDetails">
<td>{{$index+1}}</td>
....
<td><input type="checkbox" ng-model="Register.Presentstatus" .../></td>
</tr>
You'll need to bind this to a row-specific (code-specific) property if you want each row to have independent check boxes. Perhaps you are looking for something that binds the checkbox to an element in an array:
<tr id="TableBody" ng-repeat="code in Register.RegisterDetails">
<td>{{$index+1}}</td>
....
<td><input type="checkbox" ng-model="Register.Presentstatus[$index]" .../></td>
</tr>
or actually binds to a property of the code object
<tr id="TableBody" ng-repeat="code in Register.RegisterDetails">
<td>{{$index+1}}</td>
....
<td><input type="checkbox" ng-model="code.Presentstatus" .../></td>
</tr>
Since youur ng-model="Register.Presentstatus" is repeating and is same for all so you have same binding for all rows. you can alter them to have different binding
I have array of scope.students inside the controller. And the data is shown in my view form using ng-repeat in the table. What I want to do now is when I click the button, it should alert the parent index of the specific object. For example I click the button for 1 Brick Med then it should alert 0 because he is in section A. Then when I click the button in 3 it should alert 1 because he is sectionB. I am really new in angularjs any help is millions appreciated thanks
var stud = angular.module("stud", []);
stud.controller("StudentsController", function ($scope) {
'use strict';
$scope.alertMe = function (key){
alert(0);
};
$scope.sectionA = [
{
no:1,
name:'Brick Med',
},
{
no:2,
name: 'Colin Christopher',
},
];
$scope.sectionB = [
{
no:3,
name: 'Frank Joemar Timbang',
},
{
no:4,
name: 'Curtis Zaymond',
}
];
$scope.students = [
$scope.sectionA,
$scope.sectionB
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html data-ng-app="stud">
<head lang="en">
<meta charset="utf-8">
<title>Tally Boxes</title>
</head>
<body data-ng-controller="StudentsController" data-ng-init="init()">
<div id="container">
</div>
<div class="container-table">
<table border="1" width="100%">
<thead>
<tr>
<td>Students</td>
<td>Alert</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key,value) in students[0]">
<td>{{value.no}} {{value.name}}</td>
<td><button ng-click="alertMe(key)">Alert me!</button></td>
</tr>
<tr ng-repeat="(key,value) in students[1]">
<td>{{value.no}} {{value.name}}</td>
<td><button ng-click="alertMe(key)">Alert me!</button></td>
</tr>
</tbody>
</table>
</div>
<script src="angular.min.js"></script>
<script src="tallyboxController.js"></script>
<script src="tallyboxDirective.js"></script>
</body>
</html>
Your ng-repeat is a bit of a mess, but I'm guessing this is what you want to do:
<tbody ng-repeat="studentGroup in students">
<tr ng-repeat="student in studentGroup">
<td>{{student.no}} {{student.name}}</td>
<td><button ng-click="alertMe($parent.$index)">Alert me!</button></td>
</tr>
</tbody>
Note that (key, value) is for when you're iterating over an object's properties, but students is an array.
For the $parent.$index, see Access index of the parent ng-repeat from child ng-repeat
For the tbody ng-repeat see How to use ng-repeat without an html element
You could avoid using $parent.$index by changing the ng-click to alertMe(studentGroup) and $scope.alertMe to
$scope.alertMe = function (studentGroup) {
alert($scope.students.indexOf(studentGroup));
};
But it depends on your final usage which one you'd prefer.
I'm trying to create a live search feature with meteor similar to the one here.
I have a simple Mongo collection called "people" with 4 fields - name, gender, email, phone.
Here is my html:
<head>
<title>People Search</title>
</head>
<body>
<div class="container">
{{> search}}
</div>
</body>
<template name="search">
<div class="form-group">
<label for="search-query">Search:</label>
<input type="text" class="form-control search-query" id="search-query">
</div>
<h1>People</h1>
{{> people}}
</template>
<template name = "people">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
{{#each searchresults.results}}
<tr>
<td>{{name}}</td>
<td>{{gender}}</td>
<td>{{email}}</td>
<td>{{phone}}</td>
</tr>
{{/each}}
</tbody>
</table>
</template>
Here is my js file:
People = new Mongo.Collection("people");
if (Meteor.isClient) {
Template.search.events({
'keyup input.search-query': function (evt) {
Session.set("search-query", evt.currentTarget.value);
},
})
Template.people.searchResults = function () {
var keyword = Session.get("search-query");
var query = new RegExp( keyword, 'i' );
var results = People.find( { $or: [{'name': query},
{'gender': query},
{'email': query},
{'phone': query}] } );
return {results: results};
}
}
What should happen is on the event of text change in the text box, the collection is queried, and the results displayed in the table.
The event gets triggered, but the table does not get updated.
Thanks
change
{{#each searchresults.results}}
to
{{#each searchResults.results}}