I have a table with different rows where I try to delete a single row by clicking on the "delete" button. It works but when I refresh the page by clicking on displaying tables ("Afficher les tables"), I find that the row is not deleted.
Here's my controller
var app=angular.module("MyCat",[]);
app.controller("CatController",function($scope,$http){
$scope.entities=[];
$scope.entity={};
$scope.currentEntity=null;
$scope.selectedEntities=[];
$scope.dataTypes=[];
$scope.field={};
$scope.fields=[];
$scope.records=[];
$scope.rows=[];
$scope.action=null;
$scope.relations=[];
$scope.loadTables=function(){
$http.get("/getTables")
.success(function(data){
$scope.entities=data;
});
$http.get("/getTypes")
.success(function(data){
$scope.dataTypes=data;
console.log($scope.dataTypes);
});
};
$scope.loadTables();
$scope.saveTable=function(){
$http.post("/saveTable",$scope.entity)
.success(function(data){
$scope.entities.push(data);
console.log($scope.entities);
});
};
$scope.getRows=function(){
if($scope.currentEntity!=null){
$http.get("/getAllRecords?entityID="+$scope.currentEntity.id)
.success(function(data){
$scope.rows=data;
console.log($scope.rows);
});
}
};
$scope.saveField=function(){
$scope.field.entity=$scope.currentEntity;
$http.post("/saveField",$scope.field)
.success(function(data){
$scope.fields.push(data);
console.log($scope.entities);
});
};
$scope.deleteField=function(index) {
$scope.fields.splice(index,1);
};
$scope.updateField = function (index) {
};
$scope.saveEdits = function() {
$scope.editmode = false;
$scope.field= angular.copy($scope.currentrow);
};
$scope.showFields=function(t){
$scope.currentEntity=t;
$http.get("/getFields?id="+t.id)
.success(function(data){
$scope.fields=data;
});
//$scope.getRows();
$scope.action="structure";
console.log($scope.currentEntity);
};
$scope.viewTables=function(){
$scope.currentEntity=null;
};
$scope.saveRecord=function(){
console.log($scope.records);
var o={};
o.entityID=$scope.currentEntity.id;
o.record=[];var i=0;
for(id in $scope.records){
o.record[i]={};
o.record[i].fieldID=id;
o.record[i].value=$scope.records[id].value;
++i;
}
console.log(o);
$http.post("/saveRecord",o)
.success(function(data){
console.log(data);
});
};
$scope.view=function(action){
$scope.action=action;
if(action=='rows'){
$scope.getRows();
}
else if(action=='structure'){
$scope.showFields($scope.currentEntity);
}
else if(action=='form'){
console.log("-----------");
console.log($scope.fields);
//$scope.showFields();
for(item in $scope.fields){
var f= $scope.fields[item];
if(f.relation!=null){
$http.get("/getAllRecords?entityID="+f.relation.id)
.success(function(data){
$scope.relations[f.id]=data;
});
}
}
}
};
$scope.deleteTables=function(){
console.log($scope.selectedEntities);
var t=[];
for(item in $scope.selectedEntities){
console.log(item)
if($scope.selectedEntities[item].id!=false){
t.push($scope.selectedEntities[item]);
}
}
console.log(t);
$http.post("/deleteTables",t)
.success(function(data){
$scope.currentEntity={};
$scope.selectedEntities=[];
$scope.loadTables();
});
//}
};
});
Here's my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Catalogue</title>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.4-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body ng-app="MyCat" ng-controller="CatController" >
<div ng-show="currentEntity==null">
<div class="container spacer" >
<form>
<table>
<tr>
<td><label>Nom Table:</label></td>
<td><input type="text" ng-model="entity.entityName"></td>
<td><button ng-click="saveTable()">Ajouter La table</button> </td>
</tr>
</table>
</form>
</div>
<div class="container spacer">
<table class="table table-hover spacer">
<thead>
<tr>
<th><button ng-click="deleteTables()">delete</button></th>
<th>ID</th>
<th>Nom Table</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="t in entities track by $index" class="clickable"
ng-class="{active:currentEntity.id==t.id}" ng-click="showFields(t)">
<td><input type="checkbox" ng-model="selectedEntities[$index].id" ng-true-value="{{t.id}}"/></td>
<td>{{t.id}}</td>
<td>{{t.entityName}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
</div>
<div class="container spacer" ng-show="currentEntity!=null">
<div class="alert alert-info">
Champs de la table {{currentEntity.entityName}}
<button ng-click="viewTables()">Afficher Les tables</button>
<button ng-click="view('structure')">Structure</button>
<button ng-click="view('form')">Formulaire</button>
<button ng-click="view('rows')">Rows</button>
</div>
<form ng-show="action=='structure'">
<table class="table">
<thead>
<tr>
<th></th><th>ID</th><th>Nom du Champs</th><th>Type</th><th>Relation</th><th>Input Type</th><td>Size</td><th>Primary</th><th>Index</th><th></th>
</tr>
<tbody>
<tr ng-repeat="f in fields track by $index" class="clickable"
ng-class="{active:currentEntity.id==t.id}" ng-click="showFields(t)">
<tr>
<td></td>
<td></td>
<td><input type="text" ng-model="field.fieldName"/></td>
<td><input type="text" ng-model="field.fieldType">
<option ng-repeat="dt in datatypes" value="{{dt.id}}">{{dt.typeName}}</option>
</td>
<td>
<select ng-show="field.fieldType.id==6" ng-model="field.relation.id">
<option value="null">----------</option>
<option ng-repeat="t in entities" value="{{t.id}}">
{{t.entityName}}
</option>
</select>
</td>
<td>
<select ng-model="field.inputType">
<option value="text">text</option>
<option value="checkbox">checkbox</option>
<option value="radio">radio</option>
<option value="radio">select</option>
</select>
</td>
<td><input type="text" ng-model="field.size"/></td>
<td><input type="checkbox" ng-model="field.primary"/></td>
<td><input type="checkbox" ng-model="field.index"/></td>
<td><button ng-click="saveField()">Save</button></td>
</tr>
<tr ng-repeat="f in fields" track by $index" class="clickable" >
<!-- <td><input type="checkbox" ng-model="selectedEntities[$index].id" ng-true-value="{{f.id}}"/></td> -->
<td><input type="checkbox" ng-model="f.editMode"/></td>
<td><span ng-show="!f.editMode">{{f.id}}</span>
<input type="text" ng-model="f.id" ng-show="f.editMode"/></td>
<td><span ng-show="!f.editMode">{{f.fieldName}}</span>
<input type="text" ng-model="f.fieldName" ng-show="f.editMode"/></td>
<td><span ng-show="!f.editMode">{{f.fieldType.typeName}}</span>
<input type="text" ng-model="f.fieldType.typeName" ng-show="f.editMode"/></td>
<td><span ng-show="!f.editMode">{{f.relation.entityName}}</span>
<input type="text" ng-model="f.relation.entityName" ng-show="f.editMode"/></td>
<td><span ng-show="!f.editMode">{{f.inputType}}</span>
<input type="text" ng-model="f.inputType" ng-show="f.editMode"/></td>
<td><span ng-show="!f.editMode">{{f.size}}</span>
<input type="text" ng-model="f.size" ng-show="f.editMode"/></td>
<td><span ng-show="!f.editMode">{{f.primary}}</span>
<input type="text" ng-model="f.primary" ng-show="f.editMode"/></td>
<td><span ng-show="!f.editMode">{{f.index}}</span>
<input type="text" ng-model="f.index" ng-show="f.editMode"/></td>
<td><button ng-click="deleteField(f)">delete</button></td>
<td><button ng-click="SaveEdits($index)" >saveEdits</button></td>
</tr>
</tbody>
</table>
</form>
</div>
<div class="container" ng-show="currentEntity!=null">
<form ng-show="action=='form'">
<table class="table">
<tr ng-repeat="f in fields">
<td>{{f.fieldName}} :</td>
<td ng-show="f.relation==null"><input type="{{f.inputType}}" ng-model="records[f.id].value"/></td>
<td ng-show="f.relation!=null">
<select ng-model="records[f.id].value" >
<option ng-repeat="v in relations[f.id] track by $index" ng-value="{{v.id}}">
{{v.id}}
</option>
</select>
</td>
</tr>
<tr>
<td>
<button ng-click="saveRecord()">Save</button>
</td>
</tr>
</table>
</form>
</div>
<div class="container" ng-show="currentEntity!=null">
<form ng-show="action=='rows'">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th ng-repeat="f in fields">{{f.fieldName}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="r in rows track by $index">
<td>{{r['id']}}</td>
<td ng-repeat="f in fields track by f.fieldName">{{r[f.fieldName]}}</td>
</tr>
</tbody>
</table>
</form>
</div>
<script type="text/javascript" src="angular/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
And here's my view
You are using this to get the data from the server:
$http.get("/getFields?id="+t.id)
.success(function(data){
$scope.fields=data;
});
Deleting an element from the $scope.fields array won't delete it on the source of the data. If you "delete" something you need to delete it in the server:
$http.delete("/fields", {params: {fieldId: fieldID});
This is just an example, you need to figure out what's the correct url for your api. Also, the way you are doing it is not very RESTful but I take it you are still learning.
Related
I'm new to angularJS and trying to update a row of data in the view but somehow it appears not to do anything. the goal is to render the new row of data into my table.
thanks a lot!
myBankApp.controller("displayClients",function($scope,$http){
$http.get('/data/clients.json').then(function(response){
$scope.list= response.data;
});
$scope.addClient=function(){
$scope.list.push({
name: $scope.client.name,
lastName: $scope.client.lastName,
bankAccountNumber: $scope.client.bankAccountNumber,
balance:$scope.client.balance
})
$scope.client.name="";
$scope.client.lastName="";
$scope.client.bankAccountNumber="";
$scope.client.balance="";
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-controller="displayClients">
<table>
<tr>
<th>first name</th>
<th>last name</th>
<th>account number</th>
<th>balance</th>
</tr>
<tr ng-repeat= " x in list">
<td> {{x.name}}</td>
<td> {{x.lastName}}</td>
<td> {{x.bankAccountNumber}}</td>
<td> {{x.balance}}</td>
</tr>
</table>
</div>
<br>
<form ng-submit="addClient() ng-controller="displayClients"">
<input type="text" placeholder="name" ng-model="client.name"/>
<input type="text" placeholder="lastName" ng-model="client.lastName"/>
<input type="text" placeholder="account" ng-model="client.bankAccountNumber"/>
<input type="text" placeholder="balance" ng-model="client.balance"/>
<input type="submit" value="add client">
</form>
I am getting an error message which i attached a pic of, everything is working fine except the "attendance" part which is not showing in the view, i do not know what the problem is, i sure its something simple i am just not seeing it, please let me know where i am going wrong. Thank you.
error message
public function edit_data()
{
$show = $_POST['id'];
$query = $this->db->query("SELECT * FROM participants_info WHERE participant_id=$show");
$query2 = $this->db->query("SELECT * FROM participants_attendance WHERE participant_id=$show");
$query3 = $this->db->query("SELECT * FROM pcs_schedule WHERE participant_id=$show");
$data_view= $query->row();
$data_view2= $query2->row();
$data_view3= $query3->row();
trigger_error("SPECIAL".print_r($data_view, true));
trigger_error("SEVERE".print_r($data_view2, true));
trigger_error("RED".print_r($data_view3, true));
$aggregate_data_view=array('participant_id'=>'',
'First_Name'=>'','Last_Name' =>'','Function'=>'',
'Stlc_id'=>'','Address'=>'','City'=>'','State'=>'',
'Zip_Code'=>'','Phone_Number'=>'','Latitude'=>'','Longitude'=>'',
'Disenrolled'=>'','Deceased'=>'','participant_att_id'=>'','Attendance_Monday'=>'',
'Attendance_Tuesday'=>'','Attendance_Wednesday'=>'','Attendance_Thursday'=>'','Attendance_Friday'=>'',
'Lanyard_Status'=>'','Assistive_Devices'=>'','WheelChair_Van'=>'','TransitVan_240'=>'','TransitVan_360'=>'',
'Subaru_Impreza'=>'','Comments'=>'','pcs_id'=>'','Monday_Pick_Up'=>'','Monday_Drop_Off'=>'','Tuesday_Pick_Up'=>'',
'Tuesday_Drop_Off'=>'','Wednesday_Pick_Up'=>'','Wednesday_Drop_Off'=>'','Thursday_Pick_Up'=>'','Thursday_Drop_Off'=>'',
'Friday_Pick_Up'=>'','Friday_Drop_Off'=>'','Saturday_Pick_Up'=>'','Saturday_Drop_Off'=>'','Sunday_Pick_Up'=>'','Sunday_Drop_Off'=>'','Lanyard_Status'=>'','Assistive_Devices'=>'','WheelChair_Van'=>'','TransitVan_240'=>'','TransitVan_360'=>'','Subaru_Impreza'=>'','Comments'=>''
);
$aggregate_data_view['participant_id']=$data_view->participant_id;
$aggregate_data_view['First_Name']=$data_view->First_Name;
$aggregate_data_view['Last_Name']=$data_view->Last_Name;
$aggregate_data_view['Function']=$data_view->Function;
$aggregate_data_view['Stlc_id']=$data_view->Stlc_id;
$aggregate_data_view['Address']=$data_view->Address;
$aggregate_data_view['City']=$data_view->City;
$aggregate_data_view['State']=$data_view->State;
$aggregate_data_view['Zip_Code']=$data_view->Zip_Code;
$aggregate_data_view['Phone_Number']=$data_view->Phone_Number;
$aggregate_data_view['Latitude']=$data_view->Latitude;
$aggregate_data_view['Longitude']=$data_view->Longitude;
$aggregate_data_view['Disenrolled']=$data_view->Disenrolled;
$aggregate_data_view['Deceased']=$data_view->Deceased;
if($data_view2 > 0)
{
$aggregate_data_view['participant_att_id']=$data_view2->participant_att_id;
$aggregate_data_view['Attendance_Monday']=$data_view2->Attendance_Monday;
$aggregate_data_view['Attendance_Tuesday']=$data_view2->Attendance_Tuesday;
$aggregate_data_view['Attendance_Wednesday']=$data_view2->Attendance_Wednesday;
$aggregate_data_view['Attendance_Thursday']=$data_view2->Attendance_Thursday;
$aggregate_data_view['Attendance_Friday']=$data_view2->Attendance_Friday;
$aggregate_data_view['Lanyard_Status']=$data_view2->Lanyard_Status;
$aggregate_data_view['Assistive_Devices']=$data_view2->Assistive_Devices;
$aggregate_data_view['WheelChair_Van']=$data_view2->WheelChair_Van;
$aggregate_data_view['TransitVan_240']=$data_view2->TransitVan_240;
$aggregate_data_view['TransitVan_360']=$data_view2->TransitVan_360;
$aggregate_data_view['Subaru_Impreza']=$data_view2->Subaru_Impreza;
$aggregate_data_view['Comments']=$data_view2->Comments;
//$aggregate_data_view['participant_id']=$data_view2->participant_id;
}
if($data_view3 > 0)
{
$aggregate_data_view['pcs_id']=$data_view3->pcs_id;
$aggregate_data_view['Monday_Pick_Up']=$data_view3->Monday_Pick_Up;
$aggregate_data_view['Monday_Drop_Off']=$data_view3->Monday_Drop_Off;
$aggregate_data_view['Tuesday_Pick_Up']=$data_view3->Tuesday_Pick_Up;
$aggregate_data_view['Tuesday_Drop_Off']=$data_view3->Tuesday_Drop_Off;
$aggregate_data_view['Wednesday_Pick_Up']=$data_view3->Wednesday_Pick_Up;
$aggregate_data_view['Wednesday_Drop_Off']=$data_view3->Wednesday_Drop_Off;
$aggregate_data_view['Thursday_Pick_Up']=$data_view3->Thursday_Pick_Up;
$aggregate_data_view['Thursday_Drop_Off']=$data_view3->Thursday_Drop_Off;
$aggregate_data_view['Friday_Pick_Up']=$data_view3->Friday_Pick_Up;
$aggregate_data_view['Friday_Drop_Off']=$data_view3->Friday_Drop_Off;
$aggregate_data_view['Saturday_Pick_Up']=$data_view3->Saturday_Pick_Up;
$aggregate_data_view['Saturday_Drop_Off']=$data_view3->Saturday_Drop_Off;
$aggregate_data_view['Sunday_Pick_Up']=$data_view3->Sunday_Pick_Up;
$aggregate_data_view['Sunday_Drop_Off']=$data_view3->Sunday_Drop_Off;
$aggregate_data_view['Lanyard_Status']=$data_view3->Lanyard_Status;
$aggregate_data_view['Assistive_Devices']=$data_view3->Assistive_Devices;
$aggregate_data_view['WheelChair_Van']=$data_view3->WheelChair_Van;
$aggregate_data_view['TransitVan_240']=$data_view3->TransitVan_240;
$aggregate_data_view['TransitVan_360']=$data_view3->TransitVan_360;
$aggregate_data_view['Subaru_Impreza']=$data_view3->Subaru_Impreza;
$aggregate_data_view['Comments']=$data_view3->Comments;
//$aggregate_data_view['participant_id']=$data_view3->participant_id;
}
$data4view['aggregate_data_view']=$aggregate_data_view;
$this->load->helper('url');
$this->load->view('edit_data', $data4view);
}
My View: i have included part that pertains to error only.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<title>
</title>
</head>
<body ng-app="app" ng-controller="decontroller" class="container">
<div id="banner" style="text-align:center; margin-left:auto; margin-right:auto; display:block;">
<img src="http://intranet.gfhs.local/stlc_trans/STLC-Tree-Logo-PACE.png">
</div>
<h2></h2>
<h3>Personal Information:</h3>
<div id="validation-errors">
</div>
<form method="post" accept-charset="utf-8" ng-submit="processRequest()">
<table class="table table-bordered">
<tbody>
<tr>
<td>ParticipantID</td>
<td>{{edit.Stlc_id}}</td>
</tr>
<tr>
<td>First Name:<br>
</td>
<td>{{edit.First_Name}}</td>
</tr>
<tr>
<td>Last Name:<br>
</td>
<td>{{edit.Last_Name}}</td>
</tr>
<tr>
<td>Address:</td>
<td><input type="text" name ="Address" ng-model="edit.Address" required></td>
</tr>
<tr>
<td>Phone:</td>
<td><input size="20" name ="phone" ng-model="edit.Phone_Number" ></td>
</tr>
<tr>
<td>Assistive Devices:</td>
<td><input name ="Assistive_Devices" ng-model="edit.Assistive_Devices" ></td>
</tr>
<tr>
<td>Lanyard Code</td>
<td>
<input name ="Lanyard_Status" ng-model="edit.Lanyard_Status" /> </td>
</tr>
<tr>
<td>Comments</td>
<td>
<textarea cols="100" name="comments" ng-model="edit.Comments">.</textarea>
</td>
</tr>
<tr>
<td>Disenrolled</td>
<td><input name="disenrolled" type="checkbox" ng-model="edit.Disenrolled" ></td>
</tr>
<tr>
<td>Deceased</td>
<td><input name="deceased" type="checkbox" ng-model="edit.Deceased" ></td>
</tr>
</tbody>
</table>
<h3>Days in Center<br></h3>
<table class="table table-bordered">
<tbody>
<tr>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>Thursday</td>
<td>Friday</td>
</tr>
<tr>
<td><input name="Attendance_Monday" type="checkbox" ng-model="edit.Attendance_Monday" ></td>
<td><input name="Attendance_Tuesday" type="checkbox" ng-model="edit.Attendance_Tuesday" ></td>
<td><input name="Attendance_Wednesday" type="checkbox" ng-model="edit.Attendance_Wednesday" ></td>
<td><input name="Attendance_Thursday" type="checkbox" ng-model="edit.Attendance_Thursday" ></td>
<td><input name="Attendance_Friday" type="checkbox" ng-model="edit.Attendance_Friday" ></td>
</tr>
</tbody>
</table>
error message
when you do this $data_view= $query->row();, $data_view becomes an object. you can check that by var_dump($data_view). so you can not use it like if($data_view > 0) because $data_view is not an integer. if you are checking if $data_view contains any data, you can check it like this if(count($data_view) > 0).
that should work. :)
My addAct() funtion was working fine before, until I tried refactoring the index table. Now it isn't responding. Nothing is appearing in the console, for example. Maybe someone can help me figure out what's going on. I use the _form.html partial twice, but take a look at the row with id="newAct"
acts/templates/index.html
<div class="actions_body">
<div class="container">
<h2>Listing Actions</h2>
<div class="body">
<table class>
<thead>
<tr class="row">
<th class="col-md-2 active">
<label>Name</label>
</th>
<th class="col-md-5">Description</th>
<th class="col-md-2">Inspires</th>
<th colspan="2" class="col-md-2">Modify</th>
</tr>
</thead>
<tbody ng-repeat="act in acts">
<tr class="row">
<td class="col-md-2">{{act.name}}</td>
<td class="col-md-5">{{act.description}}</td>
<td class="col-md-2">{{act.inspires}}</td>
<td class="col-md-1"><button ng-click="updateActShow=true">Edit</button></td>
<td class="col-md-1"><button ng-click="deleteAct(act)">Delete</button>
<tr ng-show="updateActShow" ng-include="'acts/templates/_form.html'"></tr>
</tbody>
<tbody>
<tr class="row">
<button ng-click="newActShow=true">New Action</button>
<button ng-click="newActShow=false">Hide</button>
</tr>
<tr ng-show="newActShow" id="newAct" ng-include="'acts/templates/_form.html'"></tr>
</tbody>
</table>
</div>
</div>
</div>
acts/templates/_form.html
<div class="row" ng-controller="ActsController">
<form ng-submit="addAct()">
<td class="col-md-2">
<label for="newActName">Name</label>
<input type="text" ng-model="newAct.name" id="newActName" placeholder="Name" class="form-control">
</td>
<td class="col-md-4">
<label for="newActDescription">Description</label>
<input type="textarea" ng-model="newAct.description" id="newActDescription" placeholder="Description" class="form-control">
</td>
<td class="col-md-2">
<label for="newActInspires">Inspires</label>
<input type="number" ng-model="newAct.inspires" id="newActInspires" placeholder="Inspires" class="form-control">
</td>
<td class="col-md-2">
<input type="submit" value="+" class="btn btn-success">
</td>
</form>
</div>
acts/controllers/ActsController.js
controllers = angular.module('controllers');
controllers.controller('ActsController', [
'$scope',
'$routeParams',
'$location',
'$resource',
function($scope,$routeParams,$location,$resource) {
var Act = $resource('/acts/:actId', {
actId: "#id",
format: 'json'
}, {
'create': {
method: 'POST'
}
});
$scope.acts = Act.query();
$scope.addAct = function() {
act = Act.save($scope.newAct, function() {
$scope.acts.push(act);
$scope.newAct = '';
});
}
$scope.deleteAct = function(act) {
act.$delete();
$scope.acts.splice($scope.acts.indexOf(act), 1);
}
$scope.linkToShowAct = function(act) {
return $location.path('/acts/' + act.id);
}
}]);
You table is outside of ActsController scope. You need to put ng-controller="ActsController" on one of the elements surrounding table.
I'm using Firefox-42.0 and AngularJS v1.4.7.
HTML :
<div class="modal-body">
<p>Select user to share with from the list below.</p>
<div class="form-group">
<label for="">Search:</label>
<input type="text" class="form-control" ng-model="SharedSearchKey" ng-model-options="{ debounce: 600 }" />
</div>
<div class="modal-table" ng-show="usersToShare && usersToShare.length">
<table class="table table-striped table-responsive table-condensed">
<thead>
<tr>
<th>Name</th>
<th>User Name</th>
<th>View Only Tasks</th>
<th>Permission</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in usersToShare">
<td ng-bind="row.ContactName"></td>
<td ng-bind="row.UserName"></td>
<td>
<input type="checkbox" ng-model="row.TaskAssign" ng-init="row.TaskAssign=true" />
</td>
<td>
<select ng-model="row.permission" ng-init="row.permission='1'">
<option value="1">Readonly</option>
<option value="2">Write</option>
</select>
</td>
<td>
<input type="checkbox" ng-model="row.selected" ng-click="toggleSelectThisUser(row)" />
</td>
</tr>
</tbody>
</table>
</div>
JS in Controller :
$scope.toggleSelectThisUser = function (user) {
console.log(user);
};
When i change dropdown and click checkBox, it doesn't reflect in $scope. $scope contains the initial value. This problem occurs in Firefox. But it works fine in google chrome.
I am implementing a search input box that should search based off of a certain property of the objects that are getting iterated over and I would like them to be selected using a radio button.
For example here is my code:
<span style="margin-bottom: 10px; display: inline-block;">Search: <input ng-model="searchText.CustomerName" /> </span>
<table id="Table1" class="alertTable">
<thead>
<tr>
<th class="xsmCol"><img src="/App_Themes/SkyKick/images/misc/clear.gif" class="iFlag" /></th>
<th>Subject</th>
<th>Customer</th>
<th>Type</th>
<th>Date</th>
<th class="smCol">Actions</th>
</tr>
</thead>
<tbody id="tbAlerts">
<tr ng-repeat-start="alert in alerts | filter:searchText" > <!-- | filter:searchText -->
<td><img src="/App_Themes/SkyKick/images/misc/clear.gif" data-tooltip="{{ alert.tooltip }}" class="{{ 'iAlert' + alert.AlertType }}"/></td>
<td>{{ alert.Summary }}</td>
<td>{{ alert.CustomerName }}</td>
<td>{{ alert.CreatedDate }}</td>
<td>{{ alert.Category }}</td>
<td>
<!-- Tricky little widget logic -->
</td>
</tr>
<tr ng-repeat-end class="alertDetail">
<td></td>
<td colspan="5" ng-bind-html="alert.Details"></td>
</tr>
</tbody>
</table>
As you can see, I am currently filtering based off of the CustomerName field in my array. However, I want to change the logic so that I can select between CustomerName, Subject, Type, and Date using a radio button. So if the user clicks the Date radio button, then the searchText will filter only based off the Date attribute. What is the best way to get this functionality?
Create a set of radio buttons which share the same ng-model value. Use that value to set the key on searchText:
<span style="margin-bottom: 10px; display: inline-block;">Search:
<input ng-model="searchText[selectedSearch]" ng-init="searchText = {};
selectedSearch='CustomerName'" />
</span>
<input type="radio" ng-model="selectedSearch" value="CustomerName" > Customer Name
<input type="radio" ng-model="selectedSearch" value="CreatedDate" > Created Date
<input type="radio" ng-model="selectedSearch" value="Category" > Category
Demo
angular.module('myApp', []).controller('candidateCtrl', function($scope) {
$scope.candidates = [
{name:'Goutam',role:'Engineer',country:'India'},
{name:'Carl',role:'Engineer',country:'Sweden'},
{name:'Margareth',role:'Doctor',country:'England'},
{name:'Hege',role:'Engineer',country:'Norway'},
{name:'Joe',role:'Engineer',country:'Denmark'},
{name:'Rathin',role:'Doctor',country:'India'},
{name:'Birgit',role:'Teacher',country:'Denmark'},
{name:'Mary',role:'Engineer',country:'England'},
{name:'Kai',role:'Teacher',country:'Norway'}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp">
<div class="container" ng-controller="candidateCtrl">
<h2>Bootstrap inline Radio Buttons</h2>
<div class="row">
<div class="col-lg-4">
<p>Angular JS Filter by Radio Button</p>
<form>
<label class="radio-inline">
<input type="radio" name="optradio" ng-model="searchText.role" value="Engineer">Engineer
</label>
<label class="radio-inline">
<input type="radio" name="optradio" ng-model="searchText.role" value="Doctor">Doctor
</label>
<label class="radio-inline">
<input type="radio" name="optradio" ng-model="searchText.role" value="Teacher">Teacher
</label>
</form>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Profession</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="candidate in candidates | filter:searchText:strict">
<td>{{candidate.name}}</td>
<td>{{candidate.role}}</td>
<td>{{candidate.country}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>