I am displaying radio buttons based on search result using ng-repeat.
if i select any radio button, its color will change.
actual issue is, when i do second search, list will replace with new list.
but when i select any radion button its color not changed.
View:
<div class="col-md-4 col-sm-6 nl_item" ng-repeat="nomineeMgr in nomineesMgrList track by $index">
<div class="checkbox" ng-class="{'blue1': nomineeMgr.SystemUserId===nomManagerSelectedId}">
<label class="radio-inline">
<input type="radio" value="" name="selectedNomineeMgr{{$index}}"
ng-model="$parent.nomManagerSelectedId" ng-value="{{nomineeMgr.SystemUserId}}" />{{nomineeMgr.SystemUserId===nomManagerSelectedId?"SELECTED"}}
</label>
</div>
</div>
angular controller:
$scope.nomManagerSelectedId = 0;
$scope.searchNomineesManager = function (isValid) {
if (!isValid)
return;
var result = pepsicoService.getPepsicoEmployees($rootScope.UrlProvider.getPepsicoSearchEmployeesUrl, null, $scope.searchNomination.searchNomineMgr).then(function (response) {
if (response.data.success) {
$scope.nomineesMgrList = [];
$scope.nomManagerSelectedId = 0;
$scope.nomineesMgrList = response.data.EmployeeList;
}
else {
$rootScope.showFailureMsg(response.data.errorMessage);
}
});
};
any one have an idea to solve this issue?
Related
I have one checkbox and one textbox, now when I check the checkbox and write text in textbox at that time checkbox value and textbox value is inserted, but when I am uncheck the checkbox and write the text in textbox at that time textbox value is not inserted in database.
Here is my code
I used enum value for checkbox and textbox
Here is the enum code
public enum ChassisJobTypeEnum
{
LinerChange = 1,
ChainSetChange = 2
}
Here is the view design code
<div class="form-group row">
<label class="col-sm-3 col-form-label">Change Linear</label>
<div class="col-sm-3">
<input type="checkbox" class="form-group" id="ChassisJob#((int)ChassisJobTypeEnum.LinerChange)_Checked" placeholder="" />
</div>
<div class="col-sm-3">
<input type="text" class="form-group" id="ChassisJob.#((int)ChassisJobTypeEnum.LinerChange)_OtherJob" placeholder="" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Change Chain Set</label>
<div class="col-sm-3">
<input type="checkbox" class="form-group" id="ChassisJob#((int)ChassisJobTypeEnum.ChainSetChange)_Checked" placeholder="" />
</div>
<div class="col-sm-3">
<input type="text" class="form-group" id="ChassisJob.#((int)ChassisJobTypeEnum.ChainSetChange)_OtherJob" placeholder="" />
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<button type="submit" class="btn btn-primary" id="submit-form">Submit</button>
</div>
</div>
Now, when submit the form at that time ajax is calling to the controller
$('form').submit(function (event) {
event.preventDefault();
var chassisJobs = [];
chassisJob = {
ChassisJobsTypeId: #((int)ChassisJobTypeEnum.LinerChange),
Checked: $("#ChassisJob#((int)ChassisJobTypeEnum.LinerChange)_Checked").prop('checked'),
OtherJob: document.getElementById("ChassisJob.#((int)ChassisJobTypeEnum.LinerChange)_OtherJob").value,
};
chassisJobs.push(chassisJob);
chassisJob = {
ChassisJobsTypeId: #((int)ChassisJobTypeEnum.ChainSetChange),
Checked: $("#ChassisJob#((int)ChassisJobTypeEnum.ChainSetChange)_Checked").prop('checked'),
OtherJob: document.getElementById("ChassisJob.#((int)ChassisJobTypeEnum.ChainSetChange)_OtherJob").value,
};
chassisJobs.push(chassisJob);
var serviceJobData = {
'Id': document.getElementById("Id").value,
'ChassisJob': chassisJobs
};
$.ajax({
type: "POST",
url: '/ServiceJob/AddUpdate',
data: serviceJobData,
dataType: "json",
success: function (data) {
if (data.success == true) {
alert("Data has been update successfully");
//RefreshTable();
location.reload(true);
// set focus on edit form
document.getElementById("service-job-list").scrollIntoView();
//reste form
var frm = document.getElementsByName('service-job-form')[0];
frm.reset();
}
else {
alert("Unable to insert data")
}
error: function (xhr, ajaxOptions, thrownError) {
alert('Failed to add Detail.');
}
});
});
Here is the controller in which the addupdate method is calling at submit button.
[HttpPost]
public IActionResult AddUpdate(ServiceJobModel model)
{
ServiceJob serviceJob = new ServiceJob();
bool iSInsertData = true;
var chassisJobs = _Db.ChassisJob.Where(x => x.ServiceJobId == model.Id).ToList();
if (chassisJobs.Any())
{
_Db.ChassisJob.RemoveRange(chassisJobs);
_Db.SaveChanges();
}
return Json(new { success = true });
}
Now, this is code which I tried.
For more clear, let see task image.
When I check the checkbox and enter the value in textbox at that time insert data properly and at the fetch time it shows the checkbox and textbox value properly.
now, when I uncheck the checkbox and enter the value in textbox at that time data is not inserted and at the fetch time it does not show any thing.
If you any issue to understand the question then feel free to ask.
I want to add and remove text fields in angularjs with an add button click. And in the right side of the text fields, which were added there should be a remove option. While I click on the remove the text field should delete.
I would solve this using ng-repeat. Have a look at this example:
Edit updated the code:
angular.module("module",[])
.controller("ctrl",function($scope){
$scope.inputList = [];
$scope.add = function(){
$scope.inputList.push({content:""});
};
$scope.remove = function(input){
var idx = $scope.inputList.indexOf(input);
$scope.inputList.splice(idx,1)
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="module" ng-controller="ctrl">
<div ng-repeat="input in inputList">
<input type="text" ng-model="input.content">
<input type="button" ng-click="remove(input)" value="remove">
</div>
<input type="button" ng-click="add()" value="add">
</div>
You can use ng-repeat to achieve this functionality.
You'll have to add an object in a $scope object's array everytime the user presses Add button and removing the object when the user presses - button.
Here's the code sample.
<span ng-click="addTextBox()"> + </span>
<div ng-repeat="textBox in textBoxes">
<input type='text' />
<span ng-click="removeTextBox(textBox.id)"> - </span>
</div>
The controller goes like this
$scope.textBoxes = [];
$scope.addTextBox = function() {
$scope.textBoxes.push({id: $scope.textBoxes.length +1});
}
$scope.removeTextBox = function(id){
var indexToRemove;
for(i = 0; i < $scope.textBoxes.length; i++){
if($scope.textBoxes[i].id === id){
indexToRemove = i;
}
$scope.textBoxes.splice(indexToRemove, 1);
}
}
You can use this simple way:
HTML
<span ng-repeat="hobby in hobbies track by $index">
<div class="form-group">
<input type='text' ng-model='hobbies[$index]' class="form-control pull-right"/>
<button ng-click = "addHobby()" ng-show="$last">+</button>
<button ng-click = "removeHobby($index)" ng-show="hobbies.length > 1">-</button>
</div>
</span>
Angular Controller
$scope.hobbies = [''];
$scope.addHobby = function() {
$scope.hobbies.push('');
}
$scope.removeHobby = function(index) {
if(index >= 0){
$scope.hobbies.splice(index, 1);
}
}
I'm using $scope.checked to show/hide the "Top" text box, name="numRows" in my html.
However, even when I click on the 'top' radio button, $scope.checked always retains the value of `all' when I debug my controller code.
This simply plunker seems to work fine, http://plnkr.co/edit/6GoUZw7zkf8oqUmKg9hf?p=preview, but it won't work in my application.
In the plunker, there's a simple button whose click value will hit the controller event $scope.showval to show the value of either "top" or "all".
My HTML:
<div class="form-group">
<div class="row-fluid">
<label class="col-md-2 col-lg-2 control-label" for="numRows">Returned Rows</label>
<!-- ALL ROWS RADIO -->
<div class="col-md-1 col-lg-1">
<label class="radio-inline" for="radio-all">
<input name="radios" id="radio-all" value="all" type="radio" ng-model="checked" ng-click="setTopRows('all')">All
</label>
</div>
<!-- TOP NUM OF ROWS RADIO -->
<div class="col-md-1 col-lg-1">
<label class="radio-inline" for="radio-top">
<input name="radios" id="radio-top" value="top" type="radio" ng-model="checked" ng-click="setTopRows('top')">Top
</label>
</div>
<!-- NUM OF ROWS TEXT BOX -->
<div class="col-md-2">
<input ng-show="checked == 'top'" ng-hide="checked == 'all'" type="text" class="form-control" name="numRows" ng-model="settings.numRowsReturned" placeholder="" >
</div>
<div class="col-md-3">
Click to show<input type="button" ng-click="showval(e)">
</div>
</div>
</div>
A snippet from my angular controller code :
The $scope.checked value is always 'all', even when I click on 'top' from the html.
(function () {
'use strict';
angular.module('rage')
.controller('GadgetSettingsCtrl_NEW', ['$rootScope', '$scope', '$modalInstance', gridSettings]);
function gridSettings($rootScope, $scope, $modalInstance,) {
var settings = this;
$scope.checked = 'all';
$scope.showval = function (e) {
var test = $scope.checked;
}
$scope.setTopRows = function (numRows) {
if (numRows === 'top') {
$scope.checked = 'top';
}
else {
$scope.checked = 'all';
}
}
function checkOptions(){
var top = '';
if ($scope.checked === 'top') {
top = (settings.numRowsReturned != undefined ? settings.numRowsReturned : '');
}
}
}; // end of gridSettings()
})();
Can someone help me clear up why $scope.checked is NOT changing when I click on the radio buttons ?
thank you,
Bob
****** UPDATE *********
I've added a simple ng-click="setTopRows('all')" to force my scope variable to change. This works, but it seems like too much code to accomplish this.
I am trying to change the placeholder in the textbox by changing the checkbox using angular. I tried fiddle http://jsfiddle.net/d9uc1dxc/5/.
I have the following code:
**SCRIPT**
function TController($scope) {
$scope.placeholder="%";
$scope.formData = {};
$scope.radioChecked = function ()
{
$scope.placeholder="%";
$scope.apply();
}
$scope.radiounChecked = function ()
{
$scope.placeholder="Count";
$scope.apply();
}
}
What I am trying to achieve is (1) if I change to "%" then the textbox placeholder and (2) if I change to "Count" then the textbox placeholder should change to "Count".
Someone please help me in this issue.
please try to use this code
this is the script file
var app = angular.module("TestApp", []);
function TController($scope) {
$scope.placeholder="%";
$scope.formData = {};
$scope.radioChecked = function ()
{
if($scope.placeholder == "%"){
$scope.placeholder = "Count";
}else{
$scope.placeholder = "%";
}
}
}
and here is the html file
<body ng-app="TestApp" ng-controller="TController">
<div class="flw vreq2">
<label>Voting require2</label>
<div class="oneline">
<div class="onoffswitches">
<input type="checkbox" name="onoffswitch" ng-click="radioChecked()" class="onoffswitch-checkbox" id="myonoffswitch7"/>
<label class="onoffswitch-label" for="myonoffswitch7">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
<div class="per1">
<input type="text" placeholder="{{placeholder}}" ng-model="formData.textInput" />
</div>
</body>
hope you find this useful
you dont need the two functions for checked & unchecked
use ng-change in check box as and add a model to checkbox // model name = onoffswitch
<input type="checkbox" ng-model="onoffswitch" ng-change="radioChecked()" ...
when checkbox checked, onoffswitch model value will be true otherwise false
when changing the checkbox radioChecked() function will invoke
$scope.radioChecked = function ()
{
if($scope.onoffswitch) {
$scope.placeholder="%";
} else {
$scope.placeholder="Count";
}
}
see the demo Plunker
Im having the following problem:
i have a group of checkboxes and an indifferent check too, in the database if indifferent is checked then an empty array is saved.
I have 2 use cases:
1) if indifferent is checked, the rest is not, as soon as i check another checkbox indifferent is unchecked (This is actually working)
2) if i select all checkboxes (except indifferent), all should be unchecked and indifferent should be checked. (This is not working)
Here is an extract of my code
http://jsfiddle.net/ngbYW/
1) To test first use case:
Indifferent is checked, as soon as you click Married, indifferent is unchecked, if u click again on Married to uncheck, indifferent is checked.
2) click on Single, Relationship and Married to get them checked, then indifferent is checked AND the last one where u clicked is checked too!
Hope im clear enough.
What im doing wrong? Any help or suggestion will be appreciated.
Here is my code
HTML
<div ng-app="">
<div ng-controller="MyCntrl">
<label class="control-label">Family status</label>
<div class="controls">
<label class="checkbox inline" ng-repeat="item in familystatus"><input type="checkbox" ng-click="addToSearchedProfile(item.id,'familystatus')" ng-checked="isChecked(item,'familystatus')" >{{item.text}}</label>
<label class="checkbox inline"><input type="checkbox" value="" ng-click="addToSearchedProfile(undefined,'familystatus')" ng-checked="userSearchedProfile.familystatus.length=='0'">indifferent</label>
</div>
<label class="control-label">Sexuality</label>
<div class="controls">
<label class="checkbox inline" ng-repeat="item in sexuality"><input type="checkbox" ng-click="addToSearchedProfile(item.id,'sexuality')" ng-checked="isChecked(item,'sexuality')" >{{item.text}}</label>
<label class="checkbox inline"><input type="checkbox" value="" ng-click="addToSearchedProfile(undefined,'sexuality')" ng-checked="userSearchedProfile.sexuality.length=='0'">indifferent</label>
</div>
</div>
</div>
CONTROLLER
function MyCntrl($scope) {
$scope.familystatus = [{id:1,text:'Heterosexual'},{id:2,text:'Bisexual'},{id:3,text:'Homosexual'}];
$scope.sexuality = [{id:1,text:'Single'},{id:2,text:'Relationship'},{id:3,text:'Married'}];
$scope.userSearchedProfile = {
familystatus : [1],
sexuality : []
};
$scope.isChecked = function(item, type) {
return $scope.userSearchedProfile[type].indexOf(item.id)!==-1;
};
$scope.addToSearchedProfile = function(id, item) {
if (angular.isUndefined(id)) {
$scope.userSearchedProfile[item].length=0;
return;
}
if ($scope.userSearchedProfile[item].indexOf(id) === -1) {
$scope.userSearchedProfile[item].push(id);
} else {
$scope.userSearchedProfile[item].splice($scope.userSearchedProfile[item].indexOf(id), 1);
}
if ($scope[item].length === $scope.userSearchedProfile[item].length){
$scope.userSearchedProfile[item].length=0;
}
};
}
inter-restricting / counter acting form elements are very confusing
to me too.
I usually attack this kind of problem by defining a view model
which represents the form state and let javascript code to handle
the coordination rather than reacting to the indivisual events.
here is the simplified example: http://jsfiddle.net/4TBFn/
in template:
<label class="checkbox inline" ng-repeat="item in sexuality">
<input type="checkbox" ng-model="item.selected"/>{{item.text}}
</label>
<label class="checkbox inline">
<input type="checkbox" ng-model="indifferent"/>indifferent
</label>
in controller:
$scope.$watch('indifferent', function(v) {
if (!v) return;
for ( var i = 0; i < $scope.sexuality.length; ++i ) {
$scope.sexuality[ i ].selected = false;
}
});
$scope.$watch('sexuality', function(arr) {
var selected = arr.reduce(function(s, c) { return s + (c.selected ? 1 : 0); }, 0);
if ( selected === arr.length ) {
$scope.indifferent = true;
} else if ( selected > 0 ) {
$scope.indifferent = false;
}
}, true );