I have a simple page with 2 fields. I enter the goal name and the use tab to navigate to the next field and then hit the down arrow key to select the Public Group value and when I click the save button, the value of the picklist is setting to Individual which is incorrect. I am not exactly sure how to make the $scope variable pick the updated value from the dropdown
Here's the fiddle
<div ng-app>
<div class="container" ng-controller="goalCtrl">
<div class="row">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">New Record</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label for="goalName" class="control-label">Name</label>
<input type="text" class="form-control" id="goalName" placeholder="Goal Name" ng-model="goalie__goal__c.Name">
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label for="fulfilment" class="control-label">Fulfilment</label>
<select class="form-control" id="fulfilment" ng-model="goalie__goal__c.goalie__Fulfilment__c">
<option selected>Individual</option>
<option>Public Group</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<center>
<button class="btn btn-success" ng-click="save()"> Save and add critera</button>
<button class="btn btn-danger" ng-click="cancel()">Cancel</button>
</center>
</div>
</div>
</div>
</div>
</div>
</div></div>
Controller
function goalCtrl($scope) {
$scope.save = function() {
alert(JSON.stringify($scope.goalie__goal__c));
}
}
Update
I updated the controller where I am setting the value to Individual explicitly and then when I hit the save button all the values are updated correctly in the $scope. Not sure why its not working it the initial case.
function goalCtrl($scope) {
$scope.goalie__goal__c = {};
$scope.goalie__goal__c.goalie__Fulfilment__c = 'Individual';
$scope.save = function() {
alert(JSON.stringify($scope.goalie__goal__c));
}
}
Related
I have a form1 and a add button. The thing I want is to add same form as form2 below form1 on clinking add button. As I am new to Angular Js it will be very helpful if someone can help me out.
HTML
<div class="row">
<header class="panel-heading">
<h5 class="panel-title" style="padding-left: 1.5rem;">
<b>APPLICANTS</b>
<input class="btn btn-primary" style="float:right " type="button" value="Add" />
</h5>
<hr>
</header>
<div class="panel-body">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Name</label>
<div>
<input type="text" class="form-control" id="inputDefault" ng-model="txtFullName">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Nationality</label>
<div>
<input type="text" class="form-control" id="inputDefault" ng-model="txtNationality">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label">Pin Code</label>
<div>
<input type="text" class="form-control" id="inputDefault" ng-model="txtPincode">
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label">House No.</label>
<div>
<input type="text" class="form-control" id="inputDefault" ng-model="txtHouseNo">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You need to create an array of applicants model objects, let's call it applicantsArray, where every object will represent a single applicant form.
You need to initialize this array with one model empty on page load.
Then you need to wrap your form with ng-for and iterate over every applicant model. So the n-th form will be binded with the n-th model in the applicantsArray.
Last step will be to push an empty applicant model to applicantsArray when 'Add' is clicked. Then a new model is added and the DOM will render additional form for the new model.
Here I am sending data of mail id and its visibility to server for two different users for one I have included mail and its visibility and for another hiding visibility.
To hide visibility I am using <div ng-if="atom.type === 'person'">.
Hiding and showing is working properly but problem is that on both case
it is showing visibility undefined.
If I am not using <div ng-if="atom.type === 'person'">. then it is properly sending visibility.
How to resolve this?
My Code is bolow
var myApp = angular.module('myApp', ['ngMessages']);
myApp.controller('profileInfo', function($scope, $http) {
$scope.authorized = false;
$scope.visibility = ["Private", "Friends", "Public"];
$scope.id = 0;
$atom.type = 'person';
$scope.addMailId = function(data) {
console.log(data);
$scope.mailidDetaillD = {
'mailidDetaillList[0].email': data.mailid,
'mailidDetaillList[0].visibility': data.visibility,
'pageId': $scope.id,
};
console.log($scope.mailidDetaillD);
}
});
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular-messages.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<dd class="col-sm-7 col-md-7 col-lg-7">
<div class="pull-right" ng-if="authorized">
<a ng-click="showAddMailIdDiv()" ng-model="addMailIdLink">add MailId Details</a>
<div class="add-school" ng-show="showAddMailId">
<form action="AddMailId" id="AddMailId" name="addmail" cssClass="form-horizontal">
<div class="form-group">
<div class="col-lg-2">
<label>Mail Id</label>
</div>
<div class="col-lg-6">
<input type="text" ng-model="mail.mailid" name="mailid" placeholder="Enter mail id" required class="form-control" />
<div ng-messages="addmail.mailid.$error" ng-if="addmail.mailid.$touched">
<p class="field-err" ng-message="required">MailId Required</p>
</div>
</div>
</div>
<div ng-if="atom.type === 'person'">
<div class="form-group">
<div class="col-lg-2">
<label>Visibility</label>
</div>
<div class="col-lg-6">
<select ng-model="mail.visibility"
ng-init=" mail.visibility = visibility[1]"
ng-options="x for x in visibility"
class="form-control"
name="mailvisibility" required>
</select>
<div ng-messages="addmail.mailvisibility.$error" ng-if="addmail.mailvisibility.$touched">
<p class="field-err" ng-message="required">Select Mail visibility</p>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-2">
<label class="sr-only">Submit</label>
</div>
<div class="col-lg-6 pull-right">
<input type="button" value="add" ng-click="addMailId(mail)" ng-disabled="addmail.$invalid" cssClass="btn btn-sm btn-primary" />
<input type="button" ng-click="hideAddMailIdDiv()" value="cancle" class="btn btn-sm btn-secondary" />
</div>
</div>
</form>
</div>
</div>
</dd>
last console.log is showing following result
mailidDetaillList[0].email: "W#w.com"
mailidDetaillList[0].visibility: undefined
pageId: 2337
after removing <div ng-if="atom.type === 'person'">
mailidDetaillList[0].email: "ss#s.com"
mailidDetaillList[0].visibility: "Public"
pageId: 2337
Delete the ng-init:
<select ng-model="mail.visibility"
̶n̶g̶-̶i̶n̶i̶t̶=̶"̶ ̶m̶a̶i̶l̶.̶v̶i̶s̶i̶b̶i̶l̶i̶t̶y̶ ̶=̶ ̶v̶i̶s̶i̶b̶i̶l̶i̶t̶y̶[̶1̶]̶"̶
ng-options="x for x in visibility"
class="form-control"
name="mailvisibility" required>
</select>
And set visibility from the controller:
$scope.mail = { visibility: $scope.visibility[1] };
AngularJS is an MVC - Model-View-Controller framework. The framework renders the View from the Model. The Controller creates the Model. Using ng-init to create the Model is going the wrong way. It makes an App that is difficult to understand, test, debug, and maintain.
The ng-init directive can be abused to add unnecessary amounts of logic into your templates. There are only a few appropriate uses of ngInit. See AngularJS ng-init Directive API Reference.
Getting a HTML select value and and input value from form submit ,
in here i get only undefined for the select value, and gives error on
Cannot read property 'target' of undefined
at RightcomponentComponent.push../src/app/rightcomponent/rightcomponent.component.ts.RightcomponentComponent.formSubmit
rightcomponent.component.html
<!--Form start-->
<form >
<div class="row">
<div class="form-group row">
<div style="margin-left: 60px;margin-right:50px ">
<select class="form-control" (ngModelChange)="onSelected($event)" id="sel1">
<option *ngFor="let stock_name of stock_names" [value]="stock_name.stockName">{{stock_name.stockName}}</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="container set_buttons_div" >
<div class="form-group row">
<div class="col-xs-2">
<input class="form-control" id="ex1" type="text">
<br>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<a class="btn btn-sq-lg btn-success b_s_buttons" (click)="formSubmit(e)">
<i class="glyphicon glyphicon-thumbs-up fa-5x"></i><br/>
Buy
</a>
</div>
<br>
</form>
rightcomponent.component.ts
formSubmit(e){
var stock = this.onSelected(e);
console.log(stock);
var quantity = e.target.elements[0].value;
console.log(quantity);
}
onSelected(e){
var stock_company_name = e;
return stock_company_name;
}
I would have created component in this way, i dont know how to create a plunker / fiddler, but two way binding will work for you now. I created this way. :D
<!--Form start-->
<form #myForm="ngForm" novalidate>
<div class="row">
<div class="form-group row">
<div style="margin-left: 60px;margin-right:50px ">
<select class="form-control" (change)="onSelected($event)" id="sel1" name="stock" [(ngModel)]="Model.stockname">
<option *ngFor="let stock_name of stock_names" [value]="stock_name.stockName">{{stock_name.stockName}}</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="container set_buttons_div" >
<div class="form-group row">
<div class="col-xs-2">
<input class="form-control" id="ex1" type="text" name="companyName" [(ngModel)]="Model.companyname">
<br>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<a class="btn btn-sq-lg btn-success b_s_buttons" (click)="formSubmit()">
<i class="glyphicon glyphicon-thumbs-up fa-5x"></i><br/>
Buy
</a>
</div>
<br>
</form>
rightcomponent.component.ts
// create an Object model with form fields as key
Model = {
stockname: '',
companyname: ''
}
formSubmit(){
console.log(this.Model);
}
I have a form which adds a row of text inputs dynamically if a user wants to add a new row, it automatically populates a new row with an input field with the same id and class as the previous ones. My question is how can i get the value of each text input field?
<div class="col-xs-12 col-md-12" id="items">
<div class="row add-items">
<div class="col-md-6 col-sm-12 mx-auto">
<div class="form-group">
<label for="item">Item:</label>
<input type="text" class="form-control" id="item" placeholder="New item" name="item[]">
</div>
</div>
<div class="col-md-3 col-sm-12 mx-auto">
<div class="form-group">
<label for="charge">Item cost:</label>
<input type="text" class="form-control" name="charge[]" id="charge" placeholder="cost">
</div>
</div>
<div class="col-md-3 col-sm-12 text-right">
<button id="add-item" class="addBtn" type="button">+ item</button>
</div>
</div>
</div>
Here's what I did: I started by changing your architecture a bit by putting the input fields that contain the product name and price into a global item div. now, every product (item) will have its own name and price field!
Then with Jquery, if we click on add-item I take the first item I make an outerHTML and I add it to the div containing all the items
Then to get all items I created a button named get-items where when it pressed, I create an array, I browse all the items and for each item , I take its field name and the price field that I push in the array!
$("document").ready(function () {
$("#add-item").on('click', function () {
$('.add-items').append($('.add-items .item')[0].outerHTML)
})
$("#get-items").on('click', function () {
var arr = []
$.each($(".item"), function () {
arr.push({name: $(this).find('input').first().val(), cost:$(this).find('input').last().val()})
})
console.log(arr)
})
})
<!-- I presume you've included Jquery like this -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-md-12" id="items">
<div class="row add-items">
<div class="item">
<div class="col-md-6 col-sm-12 mx-auto">
<div class="form-group">
<label for="item">Item:</label>
<input type="text" class="form-control" id="item" placeholder="New item" name="item[]">
</div>
</div>
<div class="col-md-3 col-sm-12 mx-auto">
<div class="form-group">
<label for="charge">Item cost:</label>
<input type="text" class="form-control" name="charge[]" id="charge" placeholder="cost">
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-12 text-right">
<button id="add-item" class="addBtn" type="button">+ item</button>
</div>
<div class="col-md-3 col-sm-12 text-right">
<button id="get-items" class="addBtn" type="button">Get Items Array</button>
</div>
</div>
That's how you get the value of your text input values
document.getElementById("item").value
document.getElementById("charge").value
First of it would be good if you can post your JS code as well so I can assist you a little bit better.
Second I would not give the same elements the same ID everytime, the class is fine however.
Now you can get your inputs text using:
$(".your-input-class").map(function(){
return this.val();
});
To get the text of the last (e.g. newest) input element use:
$(".your-input-class").last().val();
Since I'm not sure what exactly you are trying to achieve at the moment I'll also leave this code:
// Access new item input text (if single input):
$("#item").val();
// Access new item input text (if multiple):
$("[name='item[]']").map(function(){ return this.val(); })
// Access charge input (if single input):
$("#charge").val();
// Access charge input (if multiple):
$("[name='charge[]']").map(function(){ return this.val(); })
$("#items").delegate("#charge", "blur", function(){
var value = $(this).val();
});
I have finally gotten a way to do it.
.controller('mainCtrl', ['$scope', '$http', function($scope, $http){
$scope.wales_total = function(){
$select_7 = parseInt($(".select_7 strong").html().replace(',' , ''));
console.log($select_7);
$welsh_total = Number($select_7 ||0);
return $welsh_total;
};
$scope.scotland_total = function(){
$select_8 = parseInt($(".select_8 strong").html().replace(',' , ''));
$total = Number($select_8 ||0);
return $total;
};
$scope.ireland_total = function(){
$select_9 = parseInt($(".select_9 strong").html().replace(',' , ''));
$total = Number($select_9 ||0);
return $total;
};
$scope.totals_test = $(".total").html();
HTML:
<div ng-switch-when="NHS Wales Health Board">
<div class="col-sm-6 col-sm-offset-3">
<form>
<label class="pull-left">Health Board</label>
<select ui-select2 class="form-control select_2nd" ng-model="selectedOption_7" ng-options="data as data.displayName for data in wales_data"></select>
<div class="population_estimate_wrapper">
<p class="population_estimate">Population Estimate</p>
<div class="population_estimate_box" ng-model="selectedOption_7">
<p class="hidden select_7"><strong>{{selectedOption_7.value}}</strong></p>
<p class="total" ng-model="total">{{wales_total()}}</p>
</div>
</div>
</form>
</div>
</div>
<div ng-switch-when="NHS Scotland Health Board">
<div class="col-sm-6 col-sm-offset-3">
<form>
<div class="form-group">
<label class="pull-left">Health Board</label>
<select ui-se-lect2 class="form-control select_2nd" ng-model="selectedOption_8" ng-options="data as data.displayName for data in scotland_data"></select>
<div class="population_estimate_wrapper">
<p class="population_estimate">Population Estimate</p>
<div class="population_estimate_box" ng-model="selectedOption_8">
<p class="hidden select_8"><strong>{{selectedOption_8.value}}</strong></p>
<p class="total">{{scotland_total()}}</p>
</div>
</div>
</div>
</form>
</div>
</div>
<div ng-switch-when="Northern Ireland Health And Social Services Board">
<div class="col-sm-6 col-sm-offset-3">
<form>
<div class="form-group">
<label class="pull-left">Health Board</label>
<select ui-select2 class="form-control select_2nd" ng-model="selectedOption_9" ng-options="data as data.displayName for data in ireland_data">
<option selected value>Select</option>
</select>
<div class="population_estimate_wrapper">
<p class="population_estimate">Population Estimate</p>
<div class="population_estimate_box" ng-model="selectedOption_9">
<p class="hidden select_9"><strong>{{selectedOption_9.value}}</strong></p>
<p class="total">{{ireland_total()}}</p>
</div>
</div>
</div>
</form>
</div>
</div>
Then we have a hide show function, that will hide the above section, and show code that is currently hidden.
HTML2:
<div class="main_container_wrapper">
<div class="main_container">
<div class="budget_row odd bg_lines_1">
<p class="blue size15"><strong>Primary non-familial hypercholesterolaemia or mixed dyslipidaemia</strong></p>
<div class="row_left">
<p class="grey size13"><strong>Total catchment population</strong></p>
</div>
<div class="row_right text-center">
<p class="number_box">{{totals_test}}</p>
</div>
</div>
So basically, whatever html is in the class="total" should be dumped into a $scope.totals_test variable. What I want to do, is if i go back to the previos page, and change the html, have angular update that when i go forward again. (its all on one page, just showing and hiding different sections)
I can't understand fully what you're asking, but I believe you're looking for the following View and Controller.
HTML
<div ng-if="!showParagraph">
<p>{{number()}}</p>
<button ng-click="show">Click Me</button
</div>
<div class="example_2" ng-if="showParagraph">
<p ng-bind="number()"></p>
</div>
CONTROLLER
$scope.show= function() {
$scope.showParagraph = true;
};
$scope.number = function() {
5 * 5
};
you can use ng-show for show hide instead of calling jquery, jquery is not under digest of AngularJS
also use something like this: $scope.number.show... if you use hirerichy like this, it will reflect in controller.. i dont know why, but it works