i want load array objects from multi select control, then i want load model object called "name" with his name and age values, then i want load array from select and load in model object.... but the ng-model from select control not work :/
<input type="text" class="form-control" ng-model="model.name" placeholder="Put your name..." />
<input type="text" class="form-control" ng-model="model.age" placeholder="Put your age..." />
<!--Select pets for model person-->
<select ng-repeat="pets in arrayFromApi" class="selectpicker" multiple>
<option id="{{pet.id}}" ng-model="model.pets.id">{{pet.name}}</option>
</select>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.model = { "name":"", "age":"", "pets" :[ {"id":""} ] };
$scope.arrayFromApi = function() {
......
this function get id names
}
});
</script>
You will probably need to use ng-options.
You can give it a try with ng-repeat but then it should be on option tag only.
Avoid using ng-repeat on the dropdowns, it casuses some performance issues. instead use ng-options.
And for havint the model with name, age and pets. check the mixData funciton.
<input type="text" class="form-control" ng-model="model.name" placeholder="Put your name..." />
<input type="text" class="form-control" ng-model="model.age" placeholder="Put your age..." />
<!--Avoid ng-repeat in dropdowns-->
<!--Select pets for model person-->
<select ng-change="mixData()" class="selectpicker" multiple ng-model="myPets" ng-options="pet.id as pet.name for pet in arrayFromApi">
<option value="">Select...</option>
</select>
<!--<select ng-repeat="pets in arrayFromApi" class="selectpicker" multiple>
<option id="{{pet.id}}" ng-model="model.pets.id">{{pet.name}}</option>
</select>-->
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.model = { "name":"", "age":"", "pets" :[ {"id":""} ] };
$scope.arrayFromApi = function() {
......
this function get id names
}
$scope.mixData = function(){
$scope.model.pets = $scope.myPets;
};
});
</script>
It's much better if you use select as angular standards ng-options with this attribute you can handle everything in your view and multiple type return array to your controller as {id: n}
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.model = {};
//from api
$scope.arrayFromApi = [{
id: 1,
name: 'test'
},
{
id: 2,
name: 'test2'
}
];
$scope.getDetails = function() {
console.log($scope.model);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="model.name" placeholder="Put your name..." />
<input type="text" ng-model="model.age" placeholder="Put your age..." />
<!--Select pets for model person-->
<select ng-model="model.pets" ng-options="{id: item.id} as item.name for item in arrayFromApi" multiple></select>
<button ng-click="getDetails()">save</button>
</div>
Related
As you all know input='date' will not return the formatted value we want. So I put the pipeline below like | date: "dd/MM/yyyy" then I can get what I want. But how can I bind that value with a model?
<input ng-disabled="defaultSaveButtons[$index]" ng-init="InitializeDateForToday($index,field)" type="date" placeholder="dd/mm/yyyy" class="form-control text-right inputFill2" ng-model="deliveryDate" />
<span ng-model="field.value">{{deliveryDate | date: "dd/MM/yyyy"}}</span>
<br />
<span>{{field.value}}</span>
Use the date filter inside your controller like below:
angular.module("myApp", [])
.controller("myCtrl", function($scope, $filter) {
$scope.field = { value : "" };
$scope.setField = function() {
var date = $filter('date')($scope.deliveryDate, "dd/MM/yyyy");
$scope.field.value = date;
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="date" placeholder="dd/mm/yyyy" ng-model="deliveryDate" ng-change="setField()"/>
<br/><br/>
<span>{{field.value}}</span><br/>
<span>{{deliveryDate}}</span>
</div>
Problem: I have form that works fine. However, I am not able to set a blank item to appear in the dropdown list.
I am new to both angular and javascript and I have not been able to figure it out.
I have the following line of code:
$scope.miles = [{'value':'5'},{'value':'10'},{'value':'15'},{'value':'20' }];
and here is the form:
<div class="panel panel-default">
<div class="panel-body">
<form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate role="form" ">
<div class="form-group"><input class="form-control" id="hospital" ng-model="searchParam.HospitalName" placeholder="Hospital Name" type="text" /></div>
<div class="form-group">
<select class="form-control" id="city" ng-model="searchParam.City">
<option disabled="disabled" selected="selected" value="">City</option>
<option value=""></option>
<cfoutput query="HospCityFind">
<option value=#officecity#>#officecity#</option>
</cfoutput>
</select></div>
<hr />
<div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important"><strong>* OR Search by Zip code radius *</strong></div>
<div class="row">
<div class="col-xs-7 no-right-padding">
<div class="form-group">
<div class="input-group">
<select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance" ng-options="mile.value for mile in miles" required>
<option selected disabled hidden style='display: none' value=''></option><!---<option >5</option><option>10</option><option>15</option><option>20</option>--->
</select>
<div class="input-group-addon">miles</div>
</div>
</div>
</div>
<div class="col-xs-5 no-left-padding widthZip">
<div class="form-group"><input allow-pattern="[\d\W]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" /></div>
</div>
</div>
<div class="form-group"><input class="btn btn-warning btn-block" onclick="return checkTextField()" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search"/></div>
</form>
</div>
</div>
How would I set a blank item to appear but have the value: 5 be the default value when I run the form. So when the user enters the page, the miles is set blank but will still generate a result when the user enters a name of a hospital and city. If users enters zip code, it will generate an alert.
Update I have tried the following as suggested by Sibi Raj to do the following:
<select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance" required>
<option selected disabled value=''></option>
<option ng-repeat="data in miles" value={{data.value}}>{{data.value}}</option>
</select>
Works fine however it creates an extra line:
and when I inspect, I get this weird value populating:
How would I remove that unknown blank space?
UPDATE
Thanks to Sibi Saj, I was able to create a blank space to appear in the textbox and still have results appear when the user enters a hosptial name and city location.
However, when I enter a zip code and select a range, meaning miles, rather then showing a hospital within the mileage, it will show the whole results.
The following is the script that Sibi Saj helped me with:
var myApp = angular.module('myApp', []);
// Controller
myApp.controller('demoController', ['$scope', function($scope) {
$scope.searchParam = {
distance: 5 //set the value to the select box
}
$scope.miles = [{
'value': '5'
}, {
'value': '10'
}, {
'value': '15'
}, {
'value': '20'
}];
}])
// directive that converts number-string to number
myApp.directive('convertToNumber', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
ngModel.$parsers.push(function(val) {
return val != null ? parseInt(val, 10) : null;
});
ngModel.$formatters.push(function(val) {
return val != null ? '' + val : null;
});
}
};
});
How would I get results to appear that are within the miles based on the zip code?
You can try to put an option inside the repeat:
<select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance" ng-options="mile.value for mile in miles" required>
<option selected disabled hidden style='display: none' value=''>
<option value="5"></option>
</option>
</select>
instead of ng options, you could use ng-repeat
<select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance" required>
<option selected disabled value=''>Select</option>
<option ng-repeat="data in miles" value={{data.value}}>{{data.value}}</option>
</select>
Add the convert to number directive to your code "convert-to-number" in the select element
In HTML
<select class="form-control" id="miles" name="distance" ng-model="searchParam.distance" required convert-to-number>
<option value="">Select Me</option>
<option value={{v.value}} ng-repeat="(k , v) in miles track by $index">{{v.value}}</option>
Script(don't forget to add the directive)
var myApp = angular.module('myApp', []);
// Controller
myApp.controller('demoController', ['$scope', function($scope) {
$scope.greeting = 'Hola!';
$scope.searchParam = {
distance: 5 //set the value to the select box
}
$scope.miles = [{
'value': '5'
}, {
'value': '10'
}, {
'value': '15'
}, {
'value': '20'
}];
}])
// directive that converts number-string to number
myApp.directive('convertToNumber', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
ngModel.$parsers.push(function(val) {
return val != null ? parseInt(val, 10) : null;
});
ngModel.$formatters.push(function(val) {
return val != null ? '' + val : null;
});
}
};
});
here is the plunker https://plnkr.co/edit/srCJAgJ9fnOnbVzp5FL3?p=preview
I want to bind my input field to my select option. so if the select option is Yes, the input field should be visible and if it is No, the input field should be hidden.
(function(){
var app = angular.module('spa',[
$rootScope.options = [
{
id: 0,
name: 'No'
},
{
id: 1,
name: 'Yes'
}
]
]);
}());
<form name="newData" class="ng-scope ng-pristine ng-invalid ng-invalid-required" error-popup="newData" novalidate>
<div class="form-group item item-input item-select">
<div class="input-label">
Booking Fee Paid
</div>
<select name="booking" ng-model="user.booking" class="form-control ng-pristine ng-invalid ng-invalid-required" ng-options="option.name for option in options track by option.id" ng-init ="user.booking = options[0]" required>
</select>
</div>
<div class="row" ng-show="user.booking.name == 'Yes'">
<div class="col">
<div class="form-group item item-input">
<input type="text" name="amount" ng-model="user.amount" class="form-control" placeholder="Amount">
</div>
</div>
</div>
</form>
http://plnkr.co/edit/v0NrbTeigo3lm1njRu9A?p=preview
Any help is appreciated
I suggest you to go through the beginner tutorials # angularjs.org.
Here is a working sample that does just what you're asking for:
angular.module('app', [])
.controller('Sample', Sample);
function Sample() {
this.options = [{
id: 0,
name: 'No'
}, {
id: 1,
name: 'Yes'
}];
this.booking = this.options[0];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Sample as vm">
<select name="booking" ng-model="vm.booking" ng-options="option.name for option in vm.options"></select>
<pre>{{ vm.booking | json }}</pre>
<input type="text" ng-show="vm.booking.name === 'Yes'"/>
</div>
Second parameter specifies required modules not the implementation:
angular.module(name, [requires], [configFn]);
So you had inject error. Here is the fixed code:
http://plnkr.co/edit/L02U4Cq0HIqeLL1AOcbl
var app = angular.module('spa', []);
app.controller('MyController', function($scope) {
$scope.options = [{
id: 0,
name: 'No'
}, {
id: 1,
name: 'Yes'
}];
});
How can I select the tag option from the javascript/Angularjs backend.
Hint: I actually get data from API service, then I fill into a form to make them available for edit. Assume the gender is Male, how can I make the tage becomes Male as it is in databse. So user can update it to Female for example.
Here is my codes:
$scope.Gender = [
{ GenderID: "Mmale", name: "Mmale" },
{ GenderID: "Female", name: "Female" }
];
HTML
<select class="form-control" name="Gender" ng-model="GenderID" ng-options="g.GenderID as g.name for g in Gender" required style="width:98px; color:gray">
<option value="" style="" >Gender?</option>
</select>
Currently I use this to change the option but it does not work for me.
$scope.Gender.name = $scope.users[id].Gender;
$scope.Gender.GenderID = $scope.users[id].Gender;
Here is a working JSFiddle, you only need to give the ng-model the GenderID you want to select:
HTML:
<div ng-app ng-controller="MyCtrl">
<select class="form-control" name="Gender" ng-model="GenderID" ng-options="g.GenderID as g.name for g in Gender" required style="width:98px; color:gray">
<option value="" style="" >Gender?</option>
</select>
</div>
JS:
function MyCtrl($scope, $filter) {
$scope.Gender = [
{ GenderID: "Mmale", name: "Mmale" },
{ GenderID: "Female", name: "Female" }
];
$scope.GenderID = "Mmale";
}
I have one controller, controller's template/view as below,
myController
angular.module('myApp', []).
controller('myController', ['$scope', function($scope) {
$scope.myObject = {};
}]);
myView
<div class="container" ng-app="myApp">
<form name="myForm" novalidate ng-controller="myController">
<div class="form-group">
<label for="firstname" class="control-label col-xs-2">Name</label>
<div class="col-xs-10">
<input type="text" ng-model="myObject.firstname" id="firstname">
</div>
</div>
<div class="form-group">
<label for="lastname" class="control-label col-xs-2">LastName</label>
<div class="col-xs-10">
<input type="text" ng-model="myObject.lastname" id="lastname">
</div>
</div>
</form>
</div>
here whenever user enters any data it gets reflected to myObject with firstname and lastname as dynamic properties for myObject.
Now my new requirement is to add multiple dynamic views for firstname and lastname in the same view(For that I will be creating a directive and appending dynamically), and now I want myObject to be an array of objects like
myObjectArray = [{firsname: "abc", lastname: "xyz"},{firsname: "abc", lastname: "xyz"},{firsname: "abc", lastname: "xyz"},{firsname: "abc", lastname: "xyz"}]
and here each object should be populated through dynamically added views by user input using angular two way binding. But I am not sure how can I achieve this with angular, how to add object to array whenever there is a new directive template added to view dynamically.
In Angular you should avoid thinking in terms of dynamic controls.
Here is the approach
You want to list firstname, lastname objects
You want to add a new object to this list.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [];
$scope.itemsToAdd = [{
firstName: '',
lastName: ''
}];
$scope.add = function(itemToAdd) {
var index = $scope.itemsToAdd.indexOf(itemToAdd);
$scope.itemsToAdd.splice(index, 1);
$scope.items.push(angular.copy(itemToAdd))
}
$scope.addNew = function() {
$scope.itemsToAdd.push({
firstName: '',
lastName: ''
})
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="plunker" ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div ng-repeat="item in items">
{{item.firstName}} {{item.lastName}}
</div>
<div ng-repeat="itemToAdd in itemsToAdd">
<input type="text" ng-model="itemToAdd.firstName" />
<input type="text" ng-model="itemToAdd.lastName" />
<button ng-click="add(itemToAdd)">Add</button>
</div>
<div>
<button ng-click="addNew()">Add new</button>
</div>
</body>
Notice these are simply talking about model. Here is a plunk