Adding text box in select options using Angular - javascript

I have a requirements, in which I have to show a combo-box (select). The options in it aren't fixed, I need to give a link to add more options, on whose click a text box must be shown within the select element, user will enter a value and it will be added in select's options. Please tell me how this can be achieved using Angular. jQuery provides a way to do that, but if i use that I am not able to bind the elements with Angular.
Regards
Nitin

Javascript file:
function ctrl($scope){
$scope.rows = ['Paul','John','Lucie'];
$scope.addRow = function(){
$scope.rows.push($scope.addName);
$scope.addName = "";
};
}
HTML page:
<body ng-controller="ctrl">
<select>
<option ng-repeat="row in rows" value="{{ row }}">{{ row }}</option>
</select>
<span class="input-append">
<input id="add" type="text" placeholder="Another one ?" ng-model="addName" />
<input type="submit" class="btn btn-primary" ng-click="addRow()" value="+ add" />
</span>
</body>
See: http://codepen.io/anon/pen/JdqqXj

I'd suggest that you take a look at the docs dedicated to the select control in AngularJS. In a nutshell, you can use the ngRepeat to generate the options for you. If you need to get them from a backend, you can use resolve in your routing options and a service to grab them for you.
The example by AngularJs's website:
HTML
<div ng-controller="ExampleController">
<form name="myForm">
<label for="repeatSelect"> Repeat select: </label>
<select name="repeatSelect" ng-model="data.repeatSelect">
<option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
</select>
</form>
<hr>
<tt>repeatSelect = {{data.repeatSelect}}</tt><br/>
</div>
APP.JS
angular.module('ngrepeatSelect', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.data = {
singleSelect: null,
availableOptions: [
{id: '1', name: 'Option A'},
{id: '2', name: 'Option B'},
{id: '3', name: 'Option C'}
],
};
}]);
You can also use ng-options, which is more recommended.
In regards to the textbox element, associate the two elements with ng-model.
Example:

Related

Setting angularJS select default value

I seem to have trouble setting a default value for a select dropdown with AngularJS. I have read similiar topics on StackOverflow, but none of the proposed solutions worked for me, so I decided to finally ask you guys :)
Bascically I want to implement an entry editing functionality in my app. So, the user clicks on the edit button, a modal pops up with a form with values filled from the object that was passed to the modal controller. I mean all of the values, but the "category" which I want to be presented as a dropdown select.
I think it's going to be easier to show in code, so I prepared this fiddle:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.dataReceived = {
category: "FOOD"
}
$scope.availableCategories = {
FOOD: "Food and drinks",
FREE_TIME: "Free time",
HOUSING: "Housing costs"
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div class="form-group">
<label for="select-category">Select category:</label>
<select class="form-control" id="select-category" ng-model="dataReceived.category" required>
<option ng-repeat="(key,value) in availableCategories" ng-value="key">
{{value}}
</option>
</select>
</div>
</div>
I tried different ways of fixing it, but none have worked so far so please help! All I want to do is for the dropdown to say "Food and drinks" by default if passed object's category is "FOOD".
Cheers!
I think you should try to use ng-options with key value pairs instead.
Like this:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.dataReceived = {
category: "FOOD"
}
$scope.availableCategories = {
FOOD: "Food and drinks",
FREE_TIME: "Free time",
HOUSING: "Housing costs"
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div class="form-group">
<label for="select-category">Select category:</label>
<select class="form-control" id="select-category" ng-model="dataReceived.category" ng-options="key as value for (key , value) in availableCategories " required>
</select>
</div>
</div>
Hope it helps.

using ng-options within ng-repeat

I am new to angular and I'm confused over this thing. I'm trying to populate a select box based on object inside an array. I want selectbox by using ng-repeat for that array... but initially i need to show only one selectbox after clicking add() next selectbox has to come. for ref:[initially one selectbox has to come]
HTML
<div class="col-lg-12" id="variant1" style="margin-top:10px" ng-repeat="variant in variants">
<div class="col-lg-4" style="text-align:right;padding-top:2px;padding-right: 20px" >
<label for="variant1name">Variant Name</label>
</div>
<div class="col-lg-6" >
<div >
<select class="form-control" ng-model="filterFormInputs.apps" ng-options="app.Application for app in variants" >
<option value="" disabled selected>Select an Application</option>
</select>
<label ng-repeat="checkbox in filterFormInputs.apps.details">
<input class="ecomtexttype1" type="checkbox" ng-model="checkbox.checked"> {{checkbox.name}}
</label>
</div>
</div>
</div>
Controller:
$scope.variants =
[
{"Application": "Color", "details":[{"name":"red"},{"name":"blue"},{"name":"black"}]},
{"Application": "Color", "details":[{"name":"red"},{"name":"blue"},{"name":"black"}]},
{"Application": "Color", "details":[{"name":"red"},{"name":"blue"},{"name":"black"}]}
]
I think that you can just have your add() function update the array... if things are configured correctly the new row should render due to the binding on the array.
As mentioned in comments you did not provide enough source code, so here is the assumed pseudo-code:
in html you might have
<button ng-click="$scope.add()">Add</button>
so in the controller
$scope.variants = [
// array of whatever you are displaying
{"foo":"bar1"},
{"foo":"bar2"}
];
$scope.add = function() {
variants.push({"foo":"bar_new"});
}
Have you considered using a Directive for this? That may work better, depending on your situation. Look into this: https://docs.angularjs.org/guide/directive

AngularJS: Is there a way to create two-way binding on a label element so that I can dynamically attach it to an object?

This problem has been frustrating me for the last couple days now so, here I am. I'll try to be as clear as possible.
I have an object to retrieve from the database. This object is used to create dropdown menus. It has two properties on it: A section property, which contains one string. The other property is called value, which contains all the possible options that the user can select in the dropdown. I use two nested ng-repeats in my HTML to create the dropdowns.
I am trying to send out to the database a formData object that has 2 properties in it: the name of the dropdown menu, and the value that the user selected. Appending the value selected from the dropdown menu is easy thanks to two way data binding that I set on the select element. However, I CANNOT figure out how to grab the value from the label element inside my controller so that I can attach it to my formData object. As far as I know, ng-model does not work on a label element. Here is the HTML, which hopefully will make it a bit more clear:
<form class="form-horizontal" ng-controller="PreferenceCtrl">
<div ng-repeat="(name, section) in configs">
<label ng-bind="name"></label>
<select class="form-control" ng-model="formData.settings[$index].value">
<option value="" disabled="disabled">---Please Select Option---</option>
<option ng-repeat="item in section" value="{{item.value}}" ng-bind="item.value">
</option>
</select>
</div>
<div class="col-md-12" ng-include="gametemp"></div>
<div class="row">
<div class="hr-line-dashed"></div>
<div class="text-center col-md-12 padding-15">
<button class="btn btn-primary btn-lg" ng-click="saveSetting()" formnovalidate translate>
<i class='fa fa-circle-o-notch fa-spin' ng-if="showBusy"></i> Save
</button>
</div>
</div>
</form>
Because the <select> class can have an ng-model attached to it, I can easily capture that value in my controller. I cannot do the same with the label. If anyone can help me out I will forever be your best friend. Thank you!
In answer to your question title "Is there a way to create a two-way binding on a label element", no, that isn't possible.
But if I understand correctly what you're trying to do, it sounds like you want to save data to the database based on information contained in both the <label> and it's associated <select>. If that's true, then I'd recommend using an ng-change function in your <select> like this:
<select class="form-control" ng-model="formData.settings[$index].value" ng-click="dropdownItemClicked(name, formData.settings[$index].value)">
<option value="" disabled="disabled">---Please Select Option---</option>
<option ng-repeat="item in section" value="{{item.value}}" ng-bind="item.value">
</option>
</select>
In your controller, create a function to handle this ng-click event:
$scope.dropdownItemClicked = function(name, value) {
console.log(name, value);
// save name/value to database
}
The key is to pass in the exact data you want to save to the database into your dropdownItemClicked() function.
Could you just put the value inside the label?
<label ng-bind="name">{{formData.settings[$index].value}}</label>
There is no way to read from the label. It is the one way binding after all, right. I would do something like this.
var app = angular.module('MyApp', []);
app.controller("MyCtrl", function($scope){
$scope.formData = {
settings:[]
};
$scope.configs = {
'Label1': [{ value: 11 }, { value: 12 }],
'Label2': [{ value: 21 }, { value: 22 }]
};
$scope.change = function(name, idx) {
$scope.formData.settings[idx].name = name;
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-cloak="" ng-app="MyApp">
<form class="form-horizontal" ng-controller="MyCtrl">
<div ng-repeat="(name, section) in configs">
<label ng-bind="name"></label>
<select class="form-control" ng-model="formData.settings[$index].value" ng-change="change(name, $index)">
<option value="" disabled="disabled">---Please Select Option---</option>
<option ng-repeat="item in section" value="{{item.value}}" ng-bind="item.value">
{{item.name}}
</option>
</select>
</div>
<div class="col-md-12" ng-include="gametemp"></div>
<div class="row">
<div class="hr-line-dashed"></div>
<div class="text-center col-md-12 padding-15">
<button class="btn btn-primary btn-lg" ng-click="saveSetting()" formnovalidate translate>
<i class='fa fa-circle-o-notch fa-spin' ng-if="showBusy"></i> Save
</button>
</div>
</div>
<div>
{{formData.settings}}
</div>
</form>
</div>

Angularjs error validation for dropdown/select redirect with ng-href

I'm currently using angularjs's ng-href and a select html element with ng-model where I am using ng-href to link to the "selectedItem" (from ng-model). I was unable to validate or provide an error when nothing was chosen and was wondering how I would do this. Also my ng-href works, I think it just doesn't have the same functionality on Plunker.
Heres my html code:
<form name="linkForm" ng-controller="MainCtrl">
<select name="link" ng-model="selectedItem"
ng-options="item as item.name for item in items"></select>
<option value=""></option>
<span class="error" ng-show="linkForm.link.$dirty && linkForm.link.$invalid">Please select a website</span>
<a ng-href="{{selectedItem.id}}">Let's go</a>
</form>
Heres my angularjs code
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [
{ id: 'http://www.google.com', name: 'Google'},
{ id: 'http://www.gmail.com', name: 'Gmail'}];
});
Heres my demo:
http://plnkr.co/edit/c9iiLP6spvQK8jYdmYhD?p=preview
You only need to add required to the select in order to make an option necessary for validation. However, you would also need to remove the check for bankLoginForm.bankLogin.$dirty, since it won't be dirty until the user modifies the dropdown. To make the href disappear when the dropdown is invalid, you can add the opposite check on it.
<select name="bankLogin" ng-model="selectedItem"
ng-options="item as item.name for item in items" required>
<option value=""></option> </select>
<span ng-show="bankLoginForm.bankLogin.$invalid">Select bank</span>
<a ng-href="{{selectedItem.id}}" ng-show="!bankLoginForm.bankLogin.$invalid">Let's go</a>
http://plnkr.co/edit/JFvvXslCZf9CnHCB0zRT?p=preview
You could work with ng-click on the link instead and handle the validation in the controller.
$scope.go = function() {
if (!$scope.selectedItem) {
alert("You have to select")
} else {
window.location.href = $scope.selectedItem.id;
}
}
And in the view:
<a ng-click="go()">Let's go</a>
Here's the updated code http://plnkr.co/edit/CLwFsNIUgt7PPRA3f4HA?p=preview

Angular radio validation in ng-repeat

I'm trying to create a form that is valid if a radio button is selected. The radio button is part of a group from which the user can choose one. I'm assigning the required attribute to the radio buttons using a function in my controller, and this seems to be causing issues with the validation. I think it's some sort of scope problem but I can't figure it out.
Here's a jsfiddle showing the problem: http://jsfiddle.net/flyingL123/x27nv8fq/5/
You can see that the radio inputs correctly have the required attribute assigned to them, but even if the user doesn't select an option, the form still validates and submits.
Here's the HTML:
<div ng-app="test" ng-controller="TestController">
<form name="testForm" ng-submit="testForm.$valid && submitForm()" novalidate>
<div ng-repeat="option in options">
<input type="radio" name="testInput"
ng-value="option"
ng-model="$parent.selectedOption"
ng-required="required()" />
{{ option.value }}
</div>
<button type="submit">Submit</button>
<p ng-show="testForm.testInput.$invalid">Form is invalid</p>
{{ selectedOption }}
</form>
</div>
And the JS:
var test = angular.module('test', []);
test.controller('TestController', ['$scope', function($scope){
$scope.options = [{id: '0', value: 'blue'}, {id: 1, value: 'green'}]
$scope.selectedOption = {};
$scope.submitForm = function(){
alert('Form valid and submitted');
}
$scope.required = function(){
if(!$scope.selectedOption.id){
return true;
}
return false;
}
}]);
Why is the form considered valid even though a required radio input is not selected?
There were 2 issues that I noticed:
1) The $scope.selectedOption (as you mentioned)
2) The $scope.required function is unnecessary as far as I can tell. You should just set required to true on those inputs - Angular knows via the name attribute that only 1 of the inputs needs to be checked.
You can see it in action here - http://jsfiddle.net/x27nv8fq/6/
HTML
<div ng-app="test" ng-controller="TestController">
<form name="testForm" ng-submit="testForm.$valid && submitForm()" novalidate>
<div ng-repeat="option in options">
<input type="radio" name="testInput"
ng-value="option"
ng-model="selectedOption"
ng-required="true" />
{{ option.value }}
</div>
<button type="submit">Submit</button>
<p ng-show="testForm.testInput.$invalid">Form is invalid</p>
{{ selectedOption }}
</form>
</div>
Javascript
var test = angular.module('test', []);
test.controller('TestController', ['$scope', function($scope){
$scope.options = [{id: '0', value: 'blue'}, {id: 1, value: 'green'}]
$scope.selectedOption;
$scope.submitForm = function(){
alert('Form valid and submitted');
}
}]);
It looks like the issue is that I'm initializing $scope.selectedOption to {} rather than leaving it undefined. I'm guessing that since an empty object is "truthy", Angular considers it valid. Remove this from the code seems to have fixed the problem.

Categories