We Keep Coding

My drop down list not selected dynamically

I have to select drop down list value dynamically for update functionality in my web site. I also go through similar tutorials and stack overflow question-answer.
I work with angularjs v1.4.2, up till now I tried below code.
HTML:
<label for="ddlDesignationDepartment"> Department</label>
<select name="ddlDesignationDepartment" ng-model="designation.DepartmentId"
ng-options="dept.DepartmentId as dept.DepartmentName for dept in departmentList track by dept.DepartmentId" >
</select>
<br/>
<label for="txtDesignationName"> Designation</label>
<input type="text" name="txtDesignationName"
ng-model="designation.DesignationName"
placeholder="Designation name"/>
<br/>
<label for="txtDescription"> Description</label>
<input type="text" name="txtDescription"
ng-model="designation.Description"
placeholder="Desription"/>
<input type="button" value="{{designation.DesignationId>0?'Update':'Insert'}}"
ng-click="ManageDesignation(designation)" />
<table name="tblDesignationResult">
<tbody ng-if="designationList.length>0">
<tr ng-repeat="des in designationList">
<td>
{{$index+1}}
</td>
<td >
{{des.DesignationName}}
</td>
<td>
{{des.Description}}
</td>
<td >
{{des.DepartmentName}}
</td>
<td>
<input type="button" value="Edit" ng-click="EditDesgnation(des)" />
</td>
</tr>
</tbody>
</table>
AngularJs code:
(function () {
'use strict';
///Decalre angular controllar for Designation
angular.module('AngularDemo').controller('DesignationCtrl', ['$scope', '$rootScope', 'DesignationService', 'DepartmentService', DesignationCtrl]);
///Designation controllar
function DesignationCtrl($scope, $rootScope, DesignationService,
DepartmentService) {
///Get or set all Designation
$scope.designationList = [];
///Get or set all Department
$scope.departmentList = [];
///Get or set Designation
$scope.designation = new Designation();
///Retrive all Designation by DesignationService
$scope.GetAllDesignations = function () {
DesignationService.GetAllDesignations().then(function (response) {
if (response && response.data) {
/// Success block
if (response.data.Result) {
$scope.designationList = angular.copy(response.data.Result);
}
else {
alert(response.data.Message);
}
}
});
}
/// Manage Insert / Update / Delete on specific Designation by
///DesignationService
$scope.ManageDesignation = function ( des) {
DesignationService.ManageDesignation(des).then(function (response) {
if (response && response.data) {
/// Success block
if (response.data.Result) {
$scope.departmentList = angular.copy(response.data.Result);
}
else {
alert(response.data.Message);
}
}
});
$scope.Init();
}
///Retrive all Department by DepartmentService
$scope.GetAllDepartments = function () {
DepartmentService.GetAllDepartments().then(function (response) {
if (response && response.data) {
/// Success block
if (response.data.Result) {
$scope.departmentList = angular.copy(response.data.Result);
}
else {
alert(response.data.Message);
}
}
});
}
///Edit Designation
$scope.EditDesgnation = function (des) {
$scope.designation = des;
}
///Inilise Designation controllar
$scope.Init = function () {
$scope.designation = new Designation();
$scope.GetAllDesignations();
$scope.GetAllDepartments();
}
}
})();
///JavaScript Class of Designation
function Designation() {
this.DesignationId = 0;
this.DesignationName='';
this.Description = '';
this.DepartmentId = 0;
}
Designation.prototype = {
constructor: Designation
}
Sample Database
Department{DepartmentId int, DepartmentName varchar(max)}
Designation{DesignationId int,DesignationName varchar(max),Description varchar(max),DepartmentId int}
All services working fine, initially everything is fine all data are display in Result table, Dropdown list was also show all departments. But the problem is when I click on edit for update any record textbox value are filled for specific data but the Department Dropdown list value are not select.

Be careful when using select as and track by in the same expression.
Given this array of items on the $scope:
$scope.items = [{
id: 1,
label: 'aLabel',
subItem: { name: 'aSubItem' }
}, {
id: 2,
label: 'bLabel',
subItem: { name: 'bSubItem' }
}];
This will work:
<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
$scope.selected = $scope.items[0];
but this will not work:
<select ng-options="item.subItem as item.label for item in items track by item.id" ng-model="selected"></select>
$scope.selected = $scope.items[0].subItem;
In both examples, the track by expression is applied successfully to each item in the items array. Because the selected option has been set programmatically in the controller, the track by expression is also applied to the ngModel value. In the first example, the ngModel value is items[0] and the track by expression evaluates to items[0].id with no issue. In the second example, the ngModel value is items[0].subItem and the track by expression evaluates to items[0].subItem.id (which is undefined). As a result, the model value is not matched against any and the appears as having no selected value
so in your case as well change this
ng-options="dept.DepartmentId as dept.DepartmentName for dept in departmentList track by dept.DepartmentId
to
ng-options="dept as dept.DepartmentName for dept in departmentList track by dept.DepartmentId
since dept[0].DepartmentId.id do not exists

Enable/Disable button in AngularJS

I have a table that has a checkbox. It has a select ALL javascript function and a select one by one function. My html file looks like this for the delete button:
<button data-toggle="modal" data-target="#rejectModal" contenteditable="false" id="delbutton" ng-model="delbutton" ng-disabled="countChecked() == 0">Delete</span></button>
Select All Checkbox:
<th class="">
<input type="checkbox" name="select" id="checkAll" ng-model="selectAllRawSCP"/>
</th>
table details:
<tr ng-repeat=" item in rawSCAP | orderBy:sort">
<td>
<input type="checkbox" name="select" value="checked" ng-model="item.checked"/>
</td>
I used the code I saw in one of the answers here in stack overflow to disable the delete button if there is no checkbox checked. It looks like this:
$scope.countChecked = function(){
var count = 0;
angular.forEach($scope.rawSCAP, function(value){
if (value.checked) count++;
});
return count;
}
But using this, my page returns an error which isTypeError: Cannot read property 'checked' of null
And also I need to enable delete button even if I used select all

The error is pretty clear, it cannot access the property checked of the rawSCAP itens. You have to guarantee rawSCAP itens checked property is not null before you try to use it in ng-model.
You could try to initialize it before with some value you want. Check this on how to do it.

There are some conditions you need to follow to use the <<ng-model>>.checked, which is a plain array can't be used for checkbox, it must be an array of objects. Also please change your function to below.
$scope.countChecked = function() {
var count = 0;
angular.forEach($scope.rawSCAP, function(value) {
value.checked = value.checked || 0;
if (value.checked) count++;
});
return count;
}
The main line which does the work is value.checked = value.checked || 0; Here if the value.checked is undefined, then the 0 will get assigned to value.checked, hence you won't get the error!
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
$scope.rawSCAP = [{
item: 1
}, {
item: 2
}, {
item: 3
}, {
item: 4
}, {
item: 5
}, {
item: 6
}, {
item: 7
}];
$scope.countChecked = function() {
var count = 0;
angular.forEach($scope.rawSCAP, function(value) {
value.checked = value.checked || 0;
if (value.checked) count++;
});
return count;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
<button data-toggle="modal" data-target="#rejectModal" contenteditable="false" id="delbutton" ng-model="delbutton" ng-disabled="countChecked() == 0">Delete</button>
<table>
<th class="">
<input type="checkbox" name="select" id="checkAll" ng-model="selectAllRawSCP" />
</th>
<tr ng-repeat=" item in rawSCAP | orderBy:sort">
<td>
<input type="checkbox" name="select" value="checked" ng-model="item.checked" />{{item.item}}
</td>
</tr>
</table>
</div>

Angularjs data-ng-click wont work a second time...how?

JSP page
<form>
<table class="countrys" data-name="tableCountry">
<tr bgcolor="lightgrey">
<th>Country ID</th>
<th>Country Name</th>
</tr>
<tr data-ng-repeat="c in allCountrys"
data-ng-click="selectedCountry(c, $index);"
data-ng-class="getSelectedClass(c);">
<td>{{c.countryId}}</td>
<td>{{c.countryName}}</td>
</tr>
</table>
</form>
controller
$scope.selectedCountry = function(country, index){
angular.forEach($scope.allCountrys,function(value, key) {
if (value.countryId == country.countryId) {
$scope.selectedCountry = country;
}
});
$scope.selectedRowCountry = index;
}
$scope.getSelectedClass = function(country) {
if ($scope.selectedCountry.countryId != undefined) {
if ($scope.selectedCountry.countryId == country.countryId) {
return "selected";
}
}
return "";
};
css
tr.selected {
background-color: #aaaaaa;
}
there is this table on my page, once i press 1 row, it selects it, it changes the color, and it goes in both functions...
but once i click on another row, it wont go to the selectedCountry function, but only into the sgetSelectedClass function
i dont know why, i just wont to be able to select one row, then another one and so on...so that always just one row is selected
can u help me?

you defined $scope.selectedCountry as a function, but at first time when you click on selectedCountry, you make $scope.selectedCountry as a object by calling $scope.selectedCountry = country; inside your ng-click function.
So remane your scope variable.
$scope.selectedCountry = function(country, index){
angular.forEach($scope.allCountrys,function(value, key) {
if (value.countryId == country.countryId) {
$scope.selectedCountry = country; // rename this scope variable
}
});

Angular directive add template on textbox (enter of Spacebar)

I am using angular js,My target is to show a html table on (enter of spacebar) in textbox and add the element of the table in that textbox,for that i have written a directive,but i am not sure whether i have done it in right path..Ohk i will show it in detail to be more clear
Here is my html textbox
<input type="text" helps ng-model="firstText" code="1">
<div class="col-xs-4 pull-right" helps donotapply=true></div> //Do i need this??
Here helps is my directive which binds my html to the div,here is my directive code
app.directive('helps', ['$parse', '$http','$filter', function ($parse, $http,$filter) {
return {
restrict: 'AE',
scope: true,
templateUrl: 'Table.html',
link: function (scope, element, attr) {
console.log(element);
element.bind("keypress", function (event) {
if (event.which === 114 || event.which === 32) {
scope.enterMe = function () { // this is to add data to Table
scope.newArray = [
{'code' :1,'name' : 'name1','age' : 24},
{'code' : 2,'name' : 'name2','age' : 26},
{'code' : 3,'name' : 'name3','age' : 25}
]
};
scope.setElement = function (element) { // Here set element function is to add my table name to textbox
var modelValue = tempattr.ngModel + '_value';
var model = $parse(tempattr.ngModel);
model.assign(scope, element.name);
modelValue = tempattr.ngModel + '_value';
modelValue = $parse(modelValue);
modelValue.assign(scope, element.code);
};
}
}
});
}
}
}]);
And Now here my Table.html
<div class="col-xs-4 pull-right" ng-show="hideMyMtHelpDiv">
<input type="text" ng-model="searchText" placeholder="search">
<input type="button" ng-model="gad" value="GO" ng-click="enterMe();">
<table ng-show="getTableValue" class="table table-bordered table-responsive table-hover add-lineheight table_scroll">
<thead>
<tr>
<td>
Code
</td>
<td>
Name
</td>
<td>
Age
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="test in newArray" ng-dblclick="setElement(test);">
<td>
{{test.code}}
</td>
<td>
{{test.name}}
</td>
<td>
{{test.age}}
</td>
</tr>
</tbody>
</table>
</div>
Now my question is that, my table is binded with my div as well as my input textbox; So, is there any proper way to do this?
If my question is still unclear kindly comment.
Thank you for any help
Check my plunker here https://plnkr.co/edit/lAUyvYKp1weg69CsC2lg?p=preview
and read README

First of all you are using the save directive in both input and div. You can separate those as first step:
mod.directive('onKeydown', function() {
return {
restrict: 'A',
scope: {
setShowSearch: '&'
},
link: function(scope, elem, attrs) {
elem.on('keydown', function(event){
if (event.which === 114 || event.which === 32) {
setShowSearch()(true);
}
});
}
};
});
Then you can pass a function to set your showSearch variable to that directive and use that on your input:
<input type="text" ng-model="firstText" hpcode="1" on-keydown="" set-show-search="setShowSearch"/>
Now that setShowSearch is living in your controller not your directive so it has its own scope.
myApp.controller('MyController', ['$scope', function($scope) {
$scope.setShowSearch = function(show) {
//do whatever you want here
};
$scope.msg = 'This Must Work!';
}]);
Once done you now have a clean directive which is responsible for showing the table and the rest is just passing that array down to that directive in a similar way.
Hope this helps.

Remove selected row in table from Knockout observable array

Alright i have working code that removes a selected row(s) via a checkbox being checked. However i am running into the issue of enforcing that only one of the radio buttons can be checked at any given moment. My first approach is to tie a click event to the each radio button and if it gets clicked, it loops through the observable array and marks all "false." Then it simply flips the flag to true for the item that fired the event. I know this isn't the best way but my lack luster knowledge of knockout is forcing me down this path..even though this method doesn't work atm. Can anyone shed light on what i am doing wrong or how to properly wire this up?
The html for the table
<table class="accountGroups information" id="tblAccountGroups">
<tr>
<td width="125px;" style="font-weight: bold;">StandardAccountNo</td>
<td width="125px;" style="font-weight: bold; text-align: center;">Primary</td>
<td style="font-weight: bold;">Effective Date</td>
<td style="font-weight: bold;">End Date</td>
<td style="font-weight: bold;">Remove</td>
</tr>
<!-- ko foreach: NewAccountGroupDetails-->
<tr id="Model.NewAccountGroupDetails[0].AccountGroupName" class="acctgrp-row">
<td>
<div>
<input style="width: 100%;" data-bind="value: StandardAccountNo, attr: {name: 'NewAccountGroupDetails[' + $index() + '].StandardAccountNo'}" />
</div>
</td>
<td>
<div style="text-align:center;">
<input style="width:100%;" type="radio" data-bind="value: IsPrimary, attr: {name: 'NewAccountGroupDetails[' + $index() + '].IsPrimary'}, click: $parent.markIsPrimary" />
</div>
</td>
<td>
<div>
<input style="width:125px;" class="datepicker" data-bind="value: EffectiveDate, attr: {name: 'NewAccountGroupDetails[' + $index() + '].EffectiveDate'}" readonly="readonly" />
</div>
</td>
<td>
<div>
<input style="width:125px;" class="datepicker" data-bind="value: EndDate, attr: {name: 'NewAccountGroupDetails[' + $index() + '].EndDate'}" readonly="readonly" />
</div>
</td>
<td>
<div style="text-align:center;">
<input type="checkbox" data-bind="checked: markedForDeletion, attr: {name: 'NewAccountGroupDetails[' + $index() + '].MarkedForDeletion'}" />
</div>
</td>
</tr>
<!-- /ko -->
</table>
The JS below powers the page
////VIEW MODEL FOR KNOCKOUT////
var Detail = function () {
this.StandardAccountNo = ko.observable('');
this.IsPrimary = ko.observable(false);
this.EffectiveDate = ko.observable(formattedDate(new Date()));
this.EndDate = ko.observable(formattedDate(new Date()));
this.markedForDeletion = ko.observable(false);
};
var ViewModel = function () {
var rawList = '#Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model.NewAccountGroupDetails))';
this.NewAccountGroupDetails = ko.observableArray(convertJSONToKoObservableObject($.parseJSON(rawList)));
this.NewAccountGroupDetails.push(new Detail());
this.deleteMarkedItems = function () {
this.NewAccountGroupDetails.remove(function (item) {
return item.markedForDeletion();
});
};
this.markIsPrimary = function () {
for (i = 0; this.NewAccountGroupDetails().length > 0; i++) {
this.NewAccountGroupDetails[i].IsPrimary(false);
}
return item.IsPrimary(true);
};
this.addNew = function () {
this.NewAccountGroupDetails.push(new Detail());
$('.datepicker').each(function (i, obj) {
$(obj).datepicker({ changeYear: true, changeMonth: true });
});
}
};
ko.applyBindings(new ViewModel());
function convertJSONToKoObservableObject(json) {
var ret = [];
$.each(json, function (i, obj) {
var newOBJ = {};
for (prop in obj) {
newOBJ[prop] = ko.observable(obj[prop]);
}
ret.push(newOBJ);
});
return ret;
}
Once i have the page working the way i want it to, i'll look into syntax improvements such as ko mapping library for the array.

In your view model, construct the remove button like this:
viewModel.remove = function (row) {
console.log(row);
viewModel.NewAccountGroupDetails.remove(row);
};
Now, the current context is passed as the first argument to any callback in knockout. Therefore, if you add a button with data-bind="click: $parent.remove", it will call the viewModel.remove function with the row context.
<tr ...>
...
<td>
<button data-bind="click: $parent.remove">Remove</button>
</td>
</tr>

I'd need some extra information, but let me show you an example, and give you a few advices:
First, the advices:
in order to convert your regular object in an object with observable properties an arrays you can use the Knockout Mapping plugin.
you can omit the step of parsing the JSON. You can simply assigng the JSON to a var, like this: var JSON=*your serialized JSON*; (Don't forget the semicolon at the end.
instead of including so many code in the data-bind, like this: NewAccountGroupDetails['+ $index() + '].EndDate, do this calculation on the viewmodel itself, an use a computed named, for example EndDateName
your viewmodel should include a selectedRow observable. When the user selects the row, put the row there, and you can use a computed observable that determines if a row is the selected row or not.
take into account that you can bind events that invoke functions in your code, and this events carry the data associated to the DOM object that originated the event. I.e. if the users clicks a row associated to a account group detail, you'll receive it in the event.
Example for 2:
// Instead of:
var viewModelJson = '[{"name": "Pepe"},{"name":"Juan"}]';
var viewModel = $.parseJSON(viewModelJson);
// Do this directly:
var people = [{"name": "Pepe"},{"name":"Juan"}];
As 4 and 5 are not clear at once, this is a simple sample of what you want to achieve.
<ul data-bind="foreach: people">
<li data-bind="text: name, click: $root.select,
css: {red: $data == $root.selectedPerson()}" >
</li>
</ul>
NOTE that the css class red is applied when the condition true. And the condition is that the value bound to the current row is the same as the value in the selectedPerson observable.
And this is the corresponding JavaScript (remember to reference knockout mapping!!)
var people = [{"name": "Pepe"},{"name":"Juan"}];
var PeopleModel = function(people) {
var self = this;
self.selectedPerson = ko.observable(); // This will hold the selected person
self.people = ko.mapping.fromJS(people); // Note ko.mapping!!
self.select = function(person) { // event receives the current data as 1st param
self.selectedPerson(person);
}
self.delete = function(person) {
// find de index of person and remove 1 item from that index
self.people.splice(self.people.indexOf(person),1);
}
return self;
};
var peopleModel = new PeopleModel(people);
ko.applyBindings(peopleModel);
You can run the jsfiddle here.
If you change the click binding to invoke $root.delete instead of $root.select, you'll see the person dissapear from the list when clicking it. Of course, you can add an extra element to do so.
NOTE: you can read the docs on click binding on knockout js site.
And a last advice: it's much better to use Web API, or a method returning a JsonResult to recover the data directly from the server, and keep the js on a separate file.
UPDATE
A little bit mode code.
You can add this HTML:
<input type="button" data-bind="click: removeSelected" value="removeSelected"/>
And this method in the view model:
self.removeSelected = function() {
if (self.selectedPerson()) {
self.delete(self.selectedPerson());
}
};
If you do so, when clicking the button, if there is a selected item, it will be removed from the list.
UPDATE: Another, more comple example
Here you have a more complete example, in this fiddle, that includes the code below:
CSS:
body {
font-family: Arial;
}
.container {
margin: 10px 0;
border: solid 1px #ABF;
}
.container > div {
padding: 4px;
border: solid 1px #ABF;
position: relative;
}
.selected {
border: solid 1px #00A;
color: #00A;
background-color: #BCF;
}
HTML:
<div data-bind="foreach: people" class="container">
<div data-bind="click: $root.select,
css: {selected: $data == $root.selectedPerson()}" >
<!-- ko text: name --><!-- /ko -->
<input type="button" value="Remove"
style="right:3px;top:2px; position:absolute;"
data-bind="click:$root.delete"/>
</div>
</div>
<div data-bind="visible: selectedPerson()" >
<input type="button" data-bind="click: removeSelected" value="Remove Selected"/>
<input type="button" data-bind="click: unSelect" value="Deselect"/>
</div>
<div data-bind="visible: selectedPerson()" class="container">
<div>
Selected: <!-- ko text: selectedPerson().name --><!-- /ko -->
</div>
</div>
JavaScript:
var people = [{"name": "Pepe"},{"name":"Juan"},{"name":"Luis"},{"name":"Adolfo"}];
var PeopleModel = function(people) {
var self = this;
self.selectedPerson = ko.observable(); // This will hold the selected person
self.people = ko.mapping.fromJS(people); // Note ko.mapping!!
self.select = function(person) { // The event receives the current data as parameter
self.selectedPerson(person);
};
self.delete = function(person) {
// find de index of person and remove (splice) it from the observable array
self.people.splice(self.people.indexOf(person),1);
self.selectedPerson(null);
}
self.removeSelected = function() {
if (self.selectedPerson()) {
self.delete(self.selectedPerson());
}
};
self.unSelect = function() {
self.selectedPerson(null);
}
return self;
};
var peopleModel = new PeopleModel(people);
ko.applyBindings(peopleModel);

Try to temporarily save the selected row when you select it
function AccountGroupViewModel() {
var viewModel = this;
viewModel.selectedRow = null;
// ...
viewModel.selectRow = function (data) {
// ...
viewModel.selectedRow = data;
}
viewModel.remove = function () {
// ...
if (viewModel.selectedRow != null) {
this.NewAccountGroupDetails.remove(viewModel.selectedRow);
}
}
}