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
Related
I have been looking for answer for this but cannot find any where.
I have table which has select and date input
<table id="tblCorrAction" class="table table-bordered table-striped table-hover table-condensed">
<thead>
<tr style="height: 30px; background-color: #aeccea; color: #555; border: solid 1px #aeccea;">
<th style="width:18%;">RArea</th>
<th style="width:37%;">P</th>
<th style="width:20%;">C</th>
<th style="width:25%;">CAction</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="ca in CASelectList">
<td>{{ca.QT}}</td>
<td>{{ca.CAPT}}</td>
<td>
<select name="caC_{{ca.QuesID}}" ng-model="item" class="form-control"
ng-selected="ca.Corrected" ng-required="true"
ng-change="GetCorrectedCAData(ca, item)"
ng-options="corr as corr.caText for corr in correctedOption">
<option value="">--Select--</option>
</select>
</td>
<td>
<span>
<input name="caDate_{{ca.QuesID}}" type="text" datepicker=""
ng-model="ca.caDate"/>
</span>
</td>
</tr>
</tbody>
</table>
In my controller
$scope.correctedOption = [{ caValue: 1, caText: 'Yes' }, { caValue: 2, caText: 'No' }];
So now what I am trying to do is if use selects yes in select option then user can enter value in datetime input and if if user selects no the entered value should be reset. I tried few things, none of it worked
First :
$scope.GetCorrectedCAData = function (ca, item) {
if (item.caValue === 2) {
$scope.ca.caDate = ""
}
}
this did not work. Error : Cannot set property 'caDate' of undefined
at ChildScope.$scope.GetCorrectedCAData
2nd : Added id to input
<input id="caDate_{{ca.QuesID}}" name="caDate_{{ca.QuesID}}" type="text" datepicker=""
ng-model="ca.caDate"/>
And in controller
if (item.caValue === 2) {
angular.element(document.querySelector("#caDate_" + ca.QuesID)).val("");
}
this also did not work. Error:Missing instance data for this datepicker
3rd: looping through CASelectList a splice the row and add the spliced row with empty data for date. I do not want to use this as there can be many many many records.
Datepicker directive
ngControlMod.directive('datepicker', function () {
return {
require: 'ngModel',
link: function (scope, el, attr, ngModel) {
$(el).datepicker({
onSelect: function (dateText) {
scope.$apply(function () {
ngModel.$setViewValue(dateText);
});
}
});
}
};
});
The ca in the ng-repeat is not the same ca as in $scope.ca in the controller. When you are doing $scope.ca it means that the controller has a $scope variable called ca on it. Like this,
var Controller = function($scope) {
$scope.ca = {
caDate: "some date";
}
}
You get that Error : Cannot set property 'caDate' of undefined because $scope.ca doesn't exist on the $scope.
If you want to reference the value inside each CASelectList in the ng-repeat (Which I think you want) then you just drop the $scope. in front of ca. So your code will look like this,
var Controller = function($scope) {
$scope.GetCorrectedCAData = function (ca, item) {
if (item.caValue === 2) {
ca.caDate = ""; // This will change the ca value of the certain ca in CASelectList
}
}
}
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>
I need one help.I need to get all checked data from the table row using Angular.js. I am explaining my code below.
<tr ng-repeat="gl in galleryDatas">
<td><input type="checkbox" name=""> {{$index+1}}</td>
<td><img ng-src="upload/{{gl.image}}" border="0" name="image" style="width:100px; height:100px;" /></td>
<td>{{gl.description}}</td>
</tr>
Here i need while user will clicked the check box the respective row data will retrieving into a array.Please help me.
Use ng-change on the checkbox
<td><input type="checkbox" ng-change="clickedRow(gl.checked)" name="" ng-model="gl.checked"></td>
In controller,
$scope.clickedRow = function(checked) {
if (checked) {
//add to the list
} else {
// remove from list
}
}
you can achieve by this process
in your controller:
$scope.galleryDatas = [
{
name: 'something',
description: "name 1"
},
{
name: 'another',
description: "name 2"
}
];
$scope.checkedValue = [];
$scope.saveInArray = function(index) {
if($scope.galleryDatas[index].checked) {
$scope.checkedValue.push($scope.galleryDatas[index]);
} else {
var newIndex = $scope.checkedValue.map(function(e) { return e.name; }).indexOf($scope.galleryDatas[index].name);
// for compare instead of "name" you should use that field is unique. ie: e.uniqueField
// and $scope.galleryDatas[index].uniqueField
if(newIndex !== -1)
$scope.checkedValue.splice(newIndex,1);
}
};
N.B: where checked row data store in $scope.checkedValue array and when unchecked then removed from $scope.checkedValue array
and Html:
<td><input type="checkbox" ng-model="gl.checked" ng-click="saveInArray($index)"> {{$index+1}}</td>
I am taking data from table and display as multi check checkboxes.My checkboxes when checked pushes data on array for that particular checkbox.But when unchecked ,the respective data should be removed from the array.How can I achieve this?
HTML:
<div ng-repeat="data in filters.status" >
<label class="Form-label--tick">
<input type="checkbox" value="data.id" id="status" ng-model="status" class="Form-label-checkbox" ng-change="IfCheck(data.id,status)" >
<span class="Form-label-text"> {{data.status}}</span>
</label>
</div>
Javascript:
<script>
$scope.IfCheck = function (data, check) {
if (check) {
status.push(data);
$scope.checkedData[0].status = status;
}
else {
var index = $scope.status.indexOf(data);
$scope.status.splice(index);
}
};
</script>
This can be written as like this:
var app = angular.module('sa', []);
app.controller('FooCtrl', function($scope) {
$scope.ids = [];
$scope.filters = [{
id: 1,
status: false
}, {
id: 2,
status: false
}, {
id: 3,
status: false
}]
$scope.IfCheck = function(id, check) {
if (check) {
$scope.ids.push(id);
} else {
var index = $scope.ids.indexOf(id);
$scope.ids.splice(index, 1);
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="sa" ng-controller="FooCtrl">
<div ng-repeat="data in filters">
<label class="Form-label--tick">
<input type="checkbox" value="data.id" id="status" ng-model="data.status" class="Form-label-checkbox" ng-change="IfCheck(data.id, data.status)">
<span class="Form-label-text"> {{data.status}}</span>
</label>
</div>
Selected ids: {{ids}}
</div>
You can utilize the ng-model to see if the input is checked or unchecked. Note that I simplified the code, so you will need to add in your various attributes and logic to what's below:
HTML:
<input type="checkbox" ng-model="isChecked" ng-change="IfCheck()">
JS:
$scope.isChecked = false;
$scope.IfCheck = function () {
if ($scope.isChecked === true) {
// checked
} else {
// unchecked
}
};
This is the example plnkr for a checkbox input with ng-model that is on the Angular documentation.
For multiple checkboxes, you will need to track something like isChecked for each checkbox.
I am trying to add the delete function for the option list:
But always getting the error message: indexOf is undefined!
Could someone help me on that? Thanks in advance!
Here is part of my code:
Html:
<div class="question_typeList" ng-switch-default>
<table class="question_heading">
<tbody>
<tr ng-repeat="option in question.options">
<td>
<input class="question_textfield" placeholder="My Option" ng-model="option.value[lang]">
<button ng-click="removeOption(option)">X</button>
</td>
<td>
{{option.value}}
</td>
</tr>
</tbody>
{{question.options}}
</table>
<button ng-click="newOption(question)">Add Options</button>
</div>
js part:
$scope.questions = [
{
title: $scope.newTranslatable("Title"),
description: $scope.newTranslatable("Mr./Mrs./Ms."),
type: "list",
options: [
{
value: $scope.newTranslatable("Mr")
}, {
value: $scope.newTranslatable("Mrs")
}, {
value: $scope.newTranslatable("Ms")
}
]
}
$scope.removeOption = function(option) {
var index = $scope.questions.options.indexOf(option);
if(index != -1) {
$scope.questions.options.splice(index, 1);
}
}
$scope.questions is defined as an array. options is not a property of the array, but a property of an element of the array.
you'll have to iterate through the $scope.questions array. This raises a new problem because as far as I can tell, your questions array doesn't appear to have a «key» field to compare against.
Still, assuming you'll manage to get an unique field in there, this is how I think you could implement a function to remove a question[x].options option:
$scope.removeOption = function(uniqueKey,option) {
var questionIndex = $scope.questions.yourUniqueKeyField.indexOf(uniqueKey);
if(questionIndex != -1){
var optionIndex = $scope.questions[questionIndex].options.indexOf(option);
if(optionIndex != -1) {
$scope.questions[questionIndex].options[optionIndex].splice(optionIndex,1);
}
}
}