selecting the item to edit AngularJS - angularjs

My problem is I expected to get the element clicked getting selected for edit,I am in fact getting the addExpert view but my element is not already selected considering that I have data-ng-model="Item.genre and data-ng-model="Item.rate on my 2. select what do I miss?
here s the complete
experience view --
<div class="form-group">
<label for="txtName">Company Name</label>
<input type="text" id="search" data-ng-model="search" class="form-control" />
</div>
<table class="table table-hover">
<tbody>
<tr>
<th>Name</th>
<th>Genre</th>
<th>Rating</th>
</tr>
<tr data-ng-repeat="item in message | filter:search" data-ng-click="editItem($experience)">
<td>{{ item.name}}</td>
<td>{{ item.genre}}</td>
<td>{{ item.rate}}</td>
</tr>
</tbody>
</table>
<button class="btn btn-primary" data-ng-click="addExperience()">
add experience
</button>
addexpertView
<div class="form-group">
<label for="chcTech">Tech</label>
<select name="chcTech" id="chcTech" class="form-control" data-ng-model="Item.genre">
<option value="c#">c#</option>
...
</select>
</div>
<div class="form-group">
<label for="chcRate">Rate</label>
<select name="chcRate" id="chcRate" class="form-control" data-ng-model="Item.rate">
<option value="1">1</option>
....
</select>
....
</div>
edit controller
cvApp.controller("editExperienceController",["$scope", "$location", "$routeParams","experienceService",
function($scope, $location, $routeParams, experienceService){
$scope.Item= experienceService.getExperience()[parseInt($routeParams.FOO)];
$scope.save=function(){
//save
$location.path("/about");
}
$scope.cancel=function(){
$location.path("/about");
}
}])
config of the routeProvider
cvApp.config(function($routeProvider) {
$routeProvider
....
.when('/about/:FOO', {
templateUrl: 'pages/addExpert.html',
controller: 'editExperienceController'
})
...
.otherwise({
redirectTo:"pages/home"
});
});
getExperience function in a service
cvApp.factory("experienceService", ["$rootScope", function($rootScope) {
var svc = {};
var message = [
....
{
name: "Azure",
genre: ".net",
rate: "4"
}];
svc.getExperience=function(){
return message;
};
....
}]);

in the experience view it's not $experience but $index
<tr data-ng-repeat="item in message | filter:search" data-ng-click="editItem($index)">

Related

Get all dirty form fields by table row in AngularJS

I have a form that is rendered inside of an HTML table using AngularJS, similar to:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<form name="inputData" id="inputData" ng-submit="submit()">
<table class="table">
<tr>
<th>Name</th>
<th>Employees</th>
<th>Head Office</th>
</tr>
<tr ng-repeat="company in companies">
<td>
<input type="text" ng-model="company.name" />
</td>
<td>
<input type="text" ng-model="company.employees" />
</td>
<td>
<input type="text" ng-model="company.headoffice" />
</td>
</tr>
</table>
<input type="submit"/>
</form>
</div>
</div>
Users can edit the values in the form. When the form is submitted, I'd like to get the $index of the row(s) that were edited. That way I can access the full row from the model via $scope.companies[$index] (which is going to get POSTed to a server).
I know I can check individual fields for the $dirty property. But is there a way I can retrieve the row number? Or better yet, a way I can retrieve all fields in the edited rows?
Here's a fiddle where, right now, I'm just highlighting the dirty fields using CSS: https://jsfiddle.net/jmg157/kzxeL0yw/2/
Thanks for any and all help!
You can try something like this ( using angular.equals) :
var app = angular.module("myApp", []);
app.controller("MyCtrl", ["$scope", function($scope) {
$scope.companies = [{
name: "Infosys Technologies",
employees: 125000,
headoffice: "Bangalore"
}, {
name: "Cognizant Technologies",
employees: 100000,
headoffice: "Bangalore"
}, {
name: "Wipro",
employees: 115000,
headoffice: "Bangalore"
}];
$scope.orginalCompanies = angular.copy($scope.companies);
$scope.submit = function() {
$scope.changedIndex = [];
if(angular.equals($scope.orginalCompanies, $scope.companies)){
console.log('NOthing is changed');
}else{
angular.forEach($scope.companies, function(value, key) {
if(!angular.equals(value, $scope.orginalCompanies[key])){
$scope.changedIndex.push(key);
}
});
console.log("changed Index:=>");
console.log($scope.changedIndex);
}
}
}]);
input.ng-dirty {
background-color: #ff0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<form name="inputData" id="inputData" ng-submit="submit()">
<table class="table">
<tr>
<th>Name
</th>
<th>Employees
</th>
<th>Head Office
</th>
</tr>
<tr ng-repeat="company in companies">
<td>
<input type="text" ng-model="company.name" />
</td>
<td>
<input type="text" ng-model="company.employees" />
</td>
<td>
<input type="text" ng-model="company.headoffice" />
</td>
</tr>
</table>
<input type="submit"/>
</form>
</div>
</div>
You can simply use ng-change directive:
angular.module("myApp", []).controller("MyCtrl", ["$scope", function($scope) {
$scope.companies = [{
name: "Infosys Technologies",
employees: 125000,
headoffice: "Bangalore"
}, {
name: "Cognizant Technologies",
employees: 100000,
headoffice: "Bangalore"
}, {
name: "Wipro",
employees: 115000,
headoffice: "Bangalore"
}];
$scope.submit = function() {
console.log($scope.inputData);
}
$scope.logs = [];
$scope.logDirty = function(key, $index) {
var message = 'company[' + $index + '].' + key + 'is dirty';
if ($scope.logs.indexOf(message) == -1)
$scope.logs.push(message);
}
}]);
input.ng-dirty {
background-color: #ff0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<form name="inputData" id="inputData" ng-submit="submit()">
<table class="table">
<tr>
<th>Name
</th>
<th>Employees
</th>
<th>Head Office
</th>
</tr>
<tr ng-repeat="company in companies" ng-init='parentIndex=$index'>
<td ng-repeat='(key, val) in company'>
<input ng-change='logDirty(key, parentIndex)' type="text" ng-model="company[key]" />
</td>
</tr>
</table>
<input type="submit" />
<ul ng-if='logs.length > 0'>
<li ng-repeat='log in logs'>{{log}}</li>
</ul>
</form>
</div>
</div>

AngularJS: ng-submit not working

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.

dropdown selected value use only once on add button in angular js

Selected value from the drop down should be added when I click on add button, only once the value should be added to the result field. Some once can help me on this. below is code which i tried.
function ContactController($scope) {
$scope.contacts = ["Apple"];
$scope.curItem = [{
id: "1",
items: "Apple"
}, {
id: "2",
items: "Orange"
}, {
id: "3",
items: "Banana"
}, {
id: "4",
items: "Apricot"
}, {
id: "5",
items: "Asparagus"
}, ];
$scope.selectedItem = $scope.curItem[0];
}
View :
<table class="range-table" width="100%">
<tr>
<td>
<input type="hidden">
<button class="btn btn-link" value= "Save">
<span class="glyphicon glyphicon-plus"></span>
</button>
</td>
<td>
<select required="" style="min-width:180px;"> </select>
</td>
</tr>
</table>
<table class="range-table" width="100%">
<tr>
<td ng-repeat="contact in contacts"> <td>{{ contact }}</td>
</tr>
</table>
HTML:
<body ng-controller="MainCtrl">
<table class="range-table" width="100%">
<tr>
<td><input type="hidden"> <button class="btn btn-link" ng-click="save(selectedItem)">Save</button> </td>
<td><select ng-model="selectedItem" ng-options="i.items as i.items for i in curItem" ng-init="selectedItem=curItem[0].id"></select></td> </tr>
</table>
<table class="range-table" width="100%">
<tr>
<tr ng-repeat="contact in contacts track by $index">
<td>{{ contact }}</td>
</tr>
</table>
</body>
Javascript (your controller code):
app.controller('MainCtrl', function($scope) {
$scope.contacts = ["Apple"];
$scope.curItem=[{id:"1",items:"Apple"}, {id:"2",items:"Orange"}, {id:"3",items:"Banana"}, {id:"4",items:"Apricot"}, {id:"5",items:"Asparagus"}];
$scope.save=function(i){
if ($scope.contacts.indexOf(i) <= -1){
$scope.contacts.push(i);
}
};
});
Here is the working Plunker
Edit: It seems that you want to add value only once. I've edited my answer and plunker.
I have created a plunker
Textbox should be enabled on click of other option radio button is checked
JS:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.$watch('form.Program', function(mVal){
if (angular.isUndefined($scope.form)) return;
if(mVal === 'other'){
$scope.form.OtherProgram = $scope.tmVar;
} else {
if($scope.form.OtherProgram !== null){
$scope.tmVar = $scope.form.OtherProgram;
$scope.form.OtherProgram = null;
}
}
});
});
HTML:
<body ng-controller="MainCtrl">
<p>
Program:
<label><input type="radio" ng-model="form.Program" name="Program" value="option 1" required /> option 1</label>
<label><input type="radio" ng-model="form.Program" name="Program" value="option 2" required /> option 2</label>
<label><input type="radio" ng-model="form.Program" name="Program" value="other" required /> other</label>
<input type="text" ng-model="form.OtherProgram" ng-disabled="form.Program != 'other'" name="Program_Other" ng-required ="form.Program != 'other'"/>
</p>
</body>

Update row in angular-smart-table

In my app i list users in a table via angular smart table. Now i would like to update a record once i modified it. I can't find any function with which i can change the user in my rowCollection so my list view reflects those changes directly.
This is my Service to receive my users from the API
services.factory('Users', function($resource) {
return $resource('/api/v1.0.0/users/:id', {id: '#id'}, {
update: {
method: 'PUT'
}
});
});
This is my List Controller to get the data from my factory. It also has the delete function. The delete function works fine - it just removes one index from the usersRowCollection. The API removes it from the DB.
app.controller('UsersCtrl', ['$scope', '$resource', 'Users',
function ($scope, $resource, Users) {
// Defines how many items per page
$scope.itemsByPage = 10;
// Create a reference object of usersRowCollection for smart table
$scope.usersRowCollection = Users.query();
$scope.usersDisplayedCollection = [].concat($scope.usersRowCollection);
/**
* Function to send a DELETE request to the API
* and to remove the row from the table
* #param user The row item
*/
$scope.deleteUser = function (user) {
// Send request to the API
user.$delete(function () {
// Remove this line from the table
var index = $scope.usersRowCollection.indexOf(user);
if (index !== -1) {
$scope.usersRowCollection.splice(index, 1);
}
})
}
}]);
This is my edit controller where i try to make the magic happen. the $scope.user.$update() function sends the changed data to the API - now i just need to get the changes reflected in my users list to which i redirect via $state.go('app.users.list') (ui-router)
app.controller('UsersEditCtrl', ['$scope', '$state', '$stateParams', 'Users',
function ($scope, $state, $stateParams, Users) {
$scope.updateUser = function () {
$scope.user.$update(function () {
$state.go('app.users.list');
//console.log($scope.user);
//console.log($scope.usersRowCollection);
//var index = $scope.usersRowCollection.indexOf($scope.user);
//console.log($scope.user.id);
// Remove this line from the table
var index = $scope.usersRowCollection.indexOf($scope.user);
if (index !== -1) {
$scope.usersRowCollection.splice(index, 1);
}
//$scope.user = Users.get({id: $scope.user.id});
//$scope.usersRowCollection.update();
// todo Update the changed entry in the table
});
};
// Loads the users json data from the REST Api
$scope.loadUser = function () {
//console.log('loadUser');
$scope.user = Users.get({id: $stateParams.id});
};
$scope.loadUser();
}]);
Thats my HTML - as you can see i use the st-safe-src attribute. If i understood correctly, it should recognice the changes and reflect them automatically.
<table st-table="usersDisplayedCollection" st-safe-src="usersRowCollection" class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>EMAIL</th>
<th>ACTIVE</th>
<th>CREATED_AT</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in usersDisplayedCollection">
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>{{ user.active }}</td>
<td>{{ user.created_at }}</td>
<td>
<button type="button" confirm-button="deleteUser(user);" confirm-message="Wirklich löschen?"
class="btn btn-sm btn-danger">
<i class="fa fa-times"></i> Delete
</button>
<a href="#" ui-sref="app.users.edit({id:user.id})" class="btn btn-sm btn-warning">
<i class="fa fa-pencil"></i> Edit
</a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="7" class="text-center">
<div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="7"></div>
</td>
</tr>
</tfoot>
</table>
Edit form:
<form class="form-horizontal" role="form" ng-submit="updateUser()">
<div class="form-group">
<label>ID</label>
<input type="text" disabled="disabled" class="form-control" value="{{ user.id }}">
</div>
<div class="form-group">
<label for="name">NAME</label>
<input type="text" ng-model="user.name" class="form-control" id="name" placeholder="YOUR NAME">
</div>
<div class="form-group">
<label for="email">E-MAIL</label>
<input type="email" ng-model="user.email" class="form-control" id="email" placeholder="YOUR EMAIL">
</div>
<div class="radio">
<label>
<input type="radio" ng-model="user.active" name="active" id="active" value="1">
ACTIVE
</label>
<label>
<input type="radio" ng-model="user.active" name="active" id="inactive" value="0">
INACTIVE
</label>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
ABBRECHEN
<button type="submit" class="btn btn-default">SPEICHERN</button>
</div>
</div>
</form>
So, how can i reflect the changes i do in my form view directly after saving in my list view?

How to switch from a bootstrap modal to a angular modal

I am switching from the bootstrap modals to Ekathuwa Angular Modals. I have a table that when I click on the "Number" a modal opens with the input fields populated with the selected objects properties. I have it working with the bootstrap modals but i am lost on how to do it the angular way.
plunkr
controller :
//editChangeOrderModal
$scope.currentItem = null;
$scope.editChangeOrderModal = function (model) {
$ekathuwa.modal({
id: 'editChangeOrderModal',
scope: $scope.currentItem = model,
templateURL: "modal-template.html"
});
};
view :
<table class=" table table-bordred table-striped table-hover">
<tr>
<th style="font-weight: bold;">Number</th>
<th style="font-weight: bold;">Date</th>
<th style="font-weight: bold;">Name</th>
</tr>
<tr ng-repeat="job in ChangeOrders" class=" pointer">
<td ng-click="editChangeOrderModal(job)">{{job.ChangeOrderNumber}}</td>
<td>{{job.ChangeOrderDate}}</td>
<td>{{job.ChangeOrderName}}</td>
</tr>
</table>
<div class="col-xs-12">
<div class="inline-fields" style="margin-top:30px">
<label>Name:</label>
<input style="width:150px" ng-model="currentItem.ChangeOrderName" type="text">
</div>
<div class="inline-fields">
<label>Number:</label>
<input style="width:150px" ng-model="currentItem.ChangeOrderNumber" type="text">
</div>
<div class="inline-fields">
<label>Date:</label>
<input style="width:150px" ng-model="currentItem.ChangeOrderDate" type="date">
</div>
<br/>
<input style="float:right"
ng-click="printEditChangeOrderModal(currentItem)"
type="button"
value="Print"
go-click="#"/>
<input style="float:right"
ng-click="updateChangeOrder(currentItem)"
type="button"
value="Save"
go-click="#"/>
<input style="float:right"
type="button"
data-dismiss="modal"
value="Exit"
go-click="#"/>
</div>
I think the problem is with this line,
scope: $scope.currentItem = model,
I changed to this
$scope.currentItem = null;
$scope.editChangeOrderModal = function(model) {
$scope.currentItem = model;
console.log(model);
$ekathuwa.modal({
id: "editChangeOrderModal",
scope:$scope,
templateURL: "modal-template.html"
});
}
I forked your [plunker]: http://plnkr.co/edit/OTJA6n7WADN5bprZaQco?p=info

Resources