How add rows to select/dropdown dynamically in AngularJS - javascript

I have a select dropdown for returnreasons that is populated from DB. If user is in specific role he can add new reasons. The problem is that my model in dropdown is not updating automatically after adding? The adding goes to DB though, but in the view dropdown is not populated again even if the model has changed.
<select class="form-control" ng-model="selectedReason">
<option ng-selected="{{reason.returnreasonId === selectedReason}}"
ng-repeat="reason in returnreasons"
value="{{reason.returnreasonId}}">
{{reason.returnText}}
</option>
</select>
<div class="form-group form-group-lg" ng-show="addReasonToggle">
<label class="col-md-2 control-label">New reason:</label>
<div class="col-md-8">
<input type="text" class="form-control" ng-model="returnReason.returnText" placeholder="New reason for return">
</div>
<div class="col-md-2">
<button class="btn btn-small btn-primary" ng-click="addNewReturnReason(returnReason)">Lisää</button>
</div>
</div>
In controller
$scope.addNewReturnReason = function(returnReason){
var savedReturnReason = [];
if (returnReason === undefined || returnReason === null) {
console.log("returnReason null");
} else {
// This is default value
returnReason.languageLanguageId = $scope.languages[0];
savedReturnReason = returnReasonSvc.save({}, returnReason);
savedReturnReason.$promise.then(function (result) {
$scope.returnReason = result;
$scope.returnreasons = returnReasonSvc.query();
$scope.addReasonToggle = false;
$scope.selectedReason=savedReturnReason;
});
};
}

Could be a problem of watch cycle is not running you can try this in your then function..
$scope.$apply();
to run manually .hope so it will work .

Related

jQuery: Conflict with removeData() executing at inadequate times

I have a modal window used to update or add a new object Store.
This modal is called remotely which information is loaded from a GET method constructed in ASP.NET.
Button that calls the modal:
<div class="btn-group" id="modalbutton">
<a id="createEditStoreModal" data-toggle="modal" asp-action="Create"
data-target="#modal-action-store" class="btn btn-primary">
<i class="glyphicon glyphicon-plus"></i> NEW STORE
</a>
</div>
Html of the modal:
#model Application.Models.ApplicationviewModels.StoreIndexData
#using Application.Models
<form asp-action="Create" role="form">
#await Html.PartialAsync("_ModalHeader", new ModalHeader
{ Heading = String.Format("Actualización de Modelo: Tiendas") })
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="modal-body form-horizontal">
<div class="form-group">
<label asp-for="DepartmentID" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select asp-for="DepartmentID" class="form-control"
asp-items="#(new SelectList(#ViewBag.ListofDepartment,"DepartmentID","DepartmentName"))"></select>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Distrito</label>
<div class="col-md-10">
<select class="form-control" id="DistrictID" name="DistrictID" asp-for="DistrictID"
asp-items="#(new SelectList(#ViewBag.ListofDistrict,"DistrictID","DistrictName"))"></select>
</div>
</div>
{... more elements}
</div>
</form>
GET Method:
public IActionResult Create(int? id)
{
List<Department> DepartmentList = new List<Department>();
DepartmentList = (from department in _context.Departments
select department).ToList();
DepartmentList.Insert(0, new Department { DepartmentID = 0, DepartmentName = "-- Seleccione Departamento --" });
ViewBag.ListofDepartment = DepartmentList;
StoreIndexData edit = new StoreIndexData();
List<District> ListofDistrict = new List<District>();
ListofDistrict.Insert(0, new District { DistrictID = 0, DistrictName = "-- PRUEBA --" });
ViewBag.ListofDistrict = ListofDistrict;
return PartialView("~/Views/Shared/Stores/_Create.cshtml");
}
The problem:
I have the following jQuery which asigns a value to DistrictID once the modal opens:
<script type="text/javascript">
var wasclicked = 0;
var $this = this;
$(document).ready(function () {
document.getElementById("modalbutton").onclick = function () {
//is AddNew Store button is hitted, this var = 1
wasclicked = 1;
};
$('#modal-action-store').on('hidden.bs.modal', function () {
//global.wasclicked = 0;
wasclicked = 0;
$(this).removeData('bs.modal');
});
$('#modal-action-store').on('shown.bs.modal', function (e) {
console.log($('#DistrictID').length);
//if wasclicked equals 1 that means we are in the AddNew Store scenario.
if (wasclicked == 1) {
//a default value is sent to District dropdownlist
var items = "<option value='0'>-- Seleccione Distrito --</option>";
$('#DistrictID').html(items);
};
});
});
</script>
The problem right now is that after this line jQuery is executed, the value that was assigned to DistrictID gets overwritten by :
ViewBag.ListofDistrict = ListofDistrict; //"-- PRUEBA --"
And this line is lost:
var items = "<option value='0'>-- Seleccione Distrito --</option>";
What I suspect is that the information coming from the Controller overwrites any result from jQuery over the in the modal.
After debugging I have identified three diferent moments:
Moment 1: First time we open the modal
The modal hasn't opened yet and the jQuery executes
For this reason it does not identify DistrictID
The result from the GET Action fills the modal's inputs.
Moment 2 - Part 1: Second time we open the modal
This time the modal opens before the jQuery is executed
The DistrictID has the value from the GET Method before we assign the value from jQuery
Moment 2 - Part 2: When the value from jQuery is assigned
The value from jQuery is assigned to DistrictID
This value will be overwritten by the result of the GET Action
Question:
Can anyone explain or help me understand what might be causing this? What else can I do to identify the reason behind this?
Trying moving the assigning of html to districtID from your main view to the document.ready of modal popUp view.
#model Application.Models.ApplicationviewModels.StoreIndexData
#using Application.Models
<form asp-action="Create" role="form">
#await Html.PartialAsync("_ModalHeader", new ModalHeader
{ Heading = String.Format("Actualización de Modelo: Tiendas") })
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="modal-body form-horizontal">
<div class="form-group">
<label asp-for="DepartmentID" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select asp-for="DepartmentID" class="form-control"
asp-items="#(new SelectList(#ViewBag.ListofDepartment,"DepartmentID","DepartmentName"))"></select>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Distrito</label>
<div class="col-md-10">
<select class="form-control" id="DistrictID" name="DistrictID" asp-for="DistrictID"
asp-items="#(new SelectList(#ViewBag.ListofDistrict,"DistrictID","DistrictName"))"></select>
</div>
</div>
{... more elements}
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
//if wasclicked equals 1 that means we are in the AddNew Store scenario.
if (wasclicked == 1) {
//a default value is sent to District dropdownlist
var items = "<option value='0'>-- Seleccione Distrito --</option>";
$('#DistrictID').html(items);
}
});
</script>
PS: Default option can be also be used. refer the below code.
<div class="form-group">
<label class="col-md-2 control-label">Distrito</label>
<div class="col-md-10">
<select class="form-control" id="DistrictID" name="DistrictID" asp-for="DistrictID" asp-items="#(new SelectList(#ViewBag.ListofDistrict,"DistrictID","DistrictName"))">
<option value='0'>-- Seleccione Distrito --</option>
</select>
</div>
</div>
modal() only accepts an options object or a string. To append elements to your modal, we can append them when the show.bs.modal is triggered:
$('#modal-action-store').on('show.bs.modal', function(e){
var items = "<option value='0'>-- Seleccione Distrito --</option>";
$('#DistrictID').html(items);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" id="modalbutton">
<a id="createEditStoreModal" data-toggle="modal" asp-action="Create"
data-target="#modal-action-store" class="btn btn-primary">
<i class="glyphicon glyphicon-plus"></i> NEW STORE
</a>
</div>
<div class="modal" id="modal-action-store">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<select class="form-control" id="DistrictID" name="DistrictID">
</select>
</div>
</div>
</div>
</div>
I would update your http://plataformafantasypark.azurewebsites.net/Stores/create to contain <option value='0'>-- Seleccione Distrito --</option> by default. This would limit the options to overwrite the element with zero entries.
This would make your js code easier too.
By the way, why do you use document.getElementById("modalbutton").onclick when you can use $("#modalbutton").on("click", function(){}); because you are using jQuery for everything else.

Angularjs email form field not clearing/resetting after model binding reset

Hey so I have a form which has three fields name,email and phone.
<div ng-show="Nerd.adding">
<form class="col-sm-6" name="Nerd.nerdAddFrm" novalidate >
<div class="form-group">
<label for="inputName">Name</label>
<input type="text" class="form-control" id="inputName" placeholder="Name" ng-model="Nerd.nerd.name" required >
</div>
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" ng-model="Nerd.nerd.email" required >
</div>
<div class="form-group">
<label for="inputPhone">Phone</label>
<input type="text" class="form-control" id="inputPhone" placeholder="Phone" ng-model="Nerd.nerd.phone" required >
</div>
<button ng-click="Nerd.saveNerd(Nerd.nerd)" type="submit" class="btn btn-primary">Submit</button>
<button ng-click="Nerd.load()" type="button" class="btn btn-default">Cancel</button>
</form>
</div>
As you can see the cancel button calls a Nerd.load() function in the controller. The controller basically resets the view and resets all the binded data to the model.
Nerd.load = function () {
Nerd.editing = false;
Nerd.adding = false;
Nerd.nerd = [];
nerdResource.query(
function (data) {
Nerd.nerds = data;
}
);
};
You can see that I am setting Nerd.nerd equal to an empty array. This should empty out the form fields data. It works fine for Name and Phone. But when I go back to the page it still shows what was last typed. There is no page reload as I am showing and hiding divs based on controller variables. EG <div ng-show="Nerd.adding">. Can anyone help me out with this?
I am on angularjs version 1.3.14. Any help on this would be great.
Thanks.
You need to attach these variables to your $scope like so:
$scope.Nerd.load = function () {
$scope.Nerd.editing = false;
$scope.Nerd.adding = false;
$scope.Nerd.nerd = [];
nerdResource.query(
function (data) {
$scope.Nerd.nerds = data;
}
);
};
Also, I think you should set $scope.Nerd to an empty object like:
$scope.Nerd = {};
instead of setting it to an empty array. You need to use $scope when interacting with the view. This code doesn't look the angular the way it is currently written.
If you can try according some way.
Nerd.load = function () {
Nerd.editing = false;
Nerd.adding = false;
Nerd.nerd = [];
nerdResource.query(
function (data) {
Nerd.nerds = data;
Nerd.nerd = []; // Put here and array make Empty
}
);
};

Getting data from the server and using ng-options in select control is failing to show options

this my HTML
<div ng-app="timeTable" ng-controller="addCoursesCtrl">
<button class="btn btn-primary" ng-click="addNewCourse()">Add New Course</button><br/><br/>
<fieldset ng-repeat="choice in choices">
<div class="row">
<div class="col-md-6">
<select class="form-control" ng-model="choice.type" ng-options="s for s in coursetoAdd">
<option value="{{s.shortCut}}">{{s.name}}</option>
</select>
</div>
<div class="col-md-6">
<input type="text" placeholder="Enter Course Name" name="" class="form-control" ng-model="choice.course"/>
</div>
</div>
<br/>
</fieldset>
<button class="btn btn-primary" ng-click="convertAndSend()">Submit</button>
</div>
this the js
var timeTable = angular.module("timeTable",[]);
timeTable.controller("addCoursesCtrl", function ($scope,$http) {
$scope.choices = [{ course: '', type: '' }];
$scope.coursetoAdd ;
$http.get("/Semster/getSuggtedCourses").then(function (response) {
$scope.coursetoAdd = response.data;
});
$scope.addNewCourse = function () {
var newITemNo = $scope.choices.length + 1;
$scope.choices.push({ course: '', type: '' });
};
$scope.convertAndSend = function () {
var asJson = angular.toJson($scope.choices);
console.log(asJson);
$http.post('/Semster/Add', asJson);
};
});
this code bind an object {"course":...,"type":....} every time you click on add course ,and add input field dynamically , my problem is with select control,I'm getting the data from server and use it with ng-optin ,but all it shows it's just [object Object] in select option not the real value.
Assuming that the data returned from getSuggestedCourses is an array of objects, the ng-options selector:
s for s in courseToAdd
will bind s to each object in the array. You need to bind to the fields in the object like this
s.value as s.name for s in courseToAdd

How to use ng-change of AngularJS?

I am populating values in dropdown in below html code , if user change dropdown i want to use ng-show and display text area so user can enter comments , How i can achieve that using AngualrJS directive ng-change.
So far tired this...
HTML
<form kendo-validator="ratingValidator" name="processRatingForm"
novalidate ng-cloak ng-controller="EditProcessRatingCtrl"
class="border-box-sizing grids-fonts">
<p class="status">{{PrcsratingValidationMsg}}</p>
<div class="row">
<div class="form-group col-md-6" ng-show="showEditdisForm">
<div>
<label class="control-label" for="controlEffBusiness">Overall
Control Effectiveness Business</label>
</div>
<div>
<select kendo-drop-down-list k-data-value-field="'id'"
k-data-text-field="'text'" k-option-label="'Select'"
k-data-source="ctrlEffOptions"
ng-model-options="{ updateOn: 'blur' }"
ng-model="processRating.controlEffectivenessRatingOverrideKey" ng-change="overrideBusinessDec()"></select>
</div>
</div>
</div>
<div class="row" ng-show="OverrideComments">
<div class="form-group col-md-6">
<label class="control-label" for="controlEffBusiness">
Overall Control Effectiveness Business Comments</label>
</div>
<div class="col-md-10" kendo-validator="overrideCommentValidator">
<textarea rows="2" class="form-control" required
data-required-msg="Business override justification is required"
ng-model="processRating.overallControlEffectivenessOverrideText"></textarea>
</div>
</div>
CTRL.JS
$scope.riskDirOptions = kendoCustomDataSource.getDropDownDataSource("RSDL_RSK_DIR");
$scope.riskBusinessOptions = kendoCustomDataSource.getDropDownDataSource("RSDL_RR");
$scope.ctrlEffOptions = kendoCustomDataSource.getDropDownDataSource("CTL_EFCTVNS_RT");
$scope.disableEffComp = true;
$scope.compReadOnly = true;
//Edit Function broadcast from parent Ctrl
$scope.$on('editProcessRating', function() {
$scope.showEditdisForm = true;
$scope.ProcessRatingWin.open().center();
if($scope.processRating.inherentRiskRatingKey === null || $scope.processRating.finalOutcomeInherentRiskRatingKey === null
|| $scope.processRating.controlEffectivenessRatingComputeKey === null) {
$scope.showEditdisForm = false;
$scope.PrcsratingValidationMsg = '*All Computed values are required*';
} else {
return true;
}
});
//Edit Save Functionality
$scope.saveProcessRating = function() {
Rating.saveProcessRating($scope.processRating).then(function(){
$rootScope.$broadcast("refreshRatingGrid");
$scope.ProcessRatingWin.close();
});
}
$scope.overrideBusinessDec = function() {
if (!($scope.processRating.controlEffectivenessRatingOverrideKey !==null)) {
$scope.OverrideComments = true;
} else {
$scope.OverrideComments = false;
}
};
$scope.closeModal = function() {
$scope.ProcessRatingWin.close();
};
Not exactly sure what you want. But this is a simple implementation of ng-change
Here is the HTML
<select data-ng-model="valueSelected"
ng-options="opt as opt.label for opt in options" ng-change="handleChange()">
</select>
Here is the .js file
app.controller('settingsCtrl',function($scope) {
$scope.handleChange = function(){
console.log(valueSelected);
}
});
The scope.handleChange will be executed every time there is a change in the dropdown.
and In your HTML try using 'ng-if' in place of 'ng-show'.
I am not sure if the scope variables you declared in the ng-change function are updated try to use a watch if needed.
Hope this will also help for your reference getting the ng-object selected with ng-change
hope it helps ! :)

Add simple antispam operation in angularjs form

I have a input field like this :
<div class="form-group form-group-sm">
<label for="antispam" class="col-sm-2 control-label">1+1+5 = ?
<span class="myForm_error" ng-show="myFormZR.antispam.$error.required">(required field)</span>
<span ng-show="myFormZR.antispam.$dirty && IsMatch">BAD ANSWER</span></label>
<div class="col-sm-10">
<input type="text" class="form-control" name="antispam" placeholder="" required="required" ng-model="myForm.antispam" />
</div>
</div>
in ctrl :
/* antispam */
var antispamAnswer = "7"
if ($scope.myForm.antispam != antispamAnswer) {
$scope.IsMatch = true;
} else {
$scope.IsMatch = false;
}
It's not working, the mention "BAD ANSWER" is always show
Your code runs only once, when Controller is instantiated. You need put that code inside of $watch function for that ng-model:
$scope.$watch('myForm.antispam', function() {
// that code
})
Also do lots of console.log() to debug your code, so you know what and when is happening in your application.

Categories