Im trying to display a check box , drop-down and text box like shown in the image using angularjs. But I couldn't get it right and now Im displaying everything one below the another. Also how to get different values for different text-boxes in the table so that time calculations are different for each row in the table.
controller:
mainApp.controller('settings-controller', function ($scope) {
$scope.fields = [{ id: 1, name: 'Sunday' },
{ id: 2, name: 'Monday' },
{ id: 3, name: 'Tuesday' },
{ id: 4, name: 'Wednesday' },
{ id: 5, name: 'Thursday' },
{ id: 5, name: 'Friday' },
{ id: 5, name: 'Sunday' }];
Html:
<ion-checkbox ng-repeat="field in fields" ng-model="field.checked" ng-checked="field.checked">
{{field.name}}
</ion-checkbox>
<input type="text" ng-model="medicinetime">
<select ng-model="time" ng-options="time for time in hours"
<option value="">Select</option>
</select>
It's just a table tr td format only. you need add ng-repeat on tr and format with td tag's like as below (please provide the correct array object name what they need.)
<table>
<tr ng-repeat="field in fields">
<td>
<ion-checkbox ng-repeat="field in fields" ng-model="field.checked" ng-checked="field.checked">
{{field.checked}}
</ion-checkbox></td>
<td>
<input type="text" ng-model="field.name"></td>
<td>
<select ng-model="field.time" ng-options="time for time in hours"
<option value="">Select</option>
</select></td></tr>
</table>
Related
I have two columns in which I generate select tags dynamically. So if there are four rows, four select tags for each column. I want that the second select tag of column2 should only be selectable when a particular option in the first select tag has been selected.
<tbody ng-init="count=0">
<tr ng-repeat="a in CustomerCallDetails">
<td colspan="1">{{a.first_name}} {{a.last_name}}</td>
<td colspan="1">{{a.date}}</td>
<td colspan="1">{{a.parent_classification_name}}({{a.parent_brand}})</td>
<td colspan="1">₹ {{a.customer_revenue | number}}</td>
<td colspan="1">{{a.phone}}</td>
<td>
<select><option ng-click="!disableSelect[count];count=count+1">Called</option><option selected="selected">Not Called</option></select>
</td>
<td colspan="1">
<select ng-disabled="disableSelect[count]"><option>Called</option><option selected="selected">Not Called</option></select>
</td>
</tr>
</tbody>
This is the code I have tried till now. But it doesnt seem to work. I have a for loop in my controller that defines disabledSelect as true. Where am I going wrong? I am new to angular. Maybe this sounds like a very tiny problem.
You can have a look at this example to infer idea and adapt it on your existing code.
HTML
<div ng-app="myapp">
<fieldset ng-controller="FirstCtrl">
<select
ng-options="p.id as p.first for p in people"
ng-model="selectedPerson"></select>
<select ng-disabled='selectedPerson === 2'
ng-options="p.id as p.actor for p in actor"
ng-model="selectedActor"></select>
selected person id: {{selectedPerson}}
</fieldset>
</div>
Controller
var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function ($scope) {
$scope.people = [
{ id: 1, first: 'John', actor: 'Silvester' },
{ id: 2, first: 'Rocky',actor: 'Silvester' },
{ id: 3, first: 'John',actor: 'Arnold' },
{ id: 4, first: 'Ben',actor: 'Arnold' }
];
$scope.actor = [
{ id: 1, actor: 'Silvester' },
{ id: 2, actor: 'Silvester' },
{ id: 3, actor: 'Arnold' },
{ id: 4, actor: 'Arnold' }
];
});
Here the first select dropdown is for the people and the value for the <option> is the id of the people. So, whenever the people with id:2 is selected the select dropdown for the Actor is disabled.
For your simplicity and further experiment here is the link to JSFIDDLE
I am new to angular JS. I have a dropdown box where static options with values are present.
Based on condition I have to select the default value which matches the value from Database. How can it be achieved?
model="TemplateObj.IsActive" has the int value 0,1 or 2 from DataBase.
<label class="">STATUS</label>
<select class="form-control input-sm" style="border: none" required ng-model="TemplateObj.IsActive" >
<option value="2">In Development</option>
<option value="1">Active</option>
<option value="0">InActive</option>
</select>
Use ng-options directive with array of statuses. The syntax may look a bit complicated for beginner, but you'll learn it someday: value as title for element in array
JS:
$scope.statuses = [{
title: 'In Development',
value: 2
}, {
title: 'Active',
value: 1
}, {
title: 'Inactive',
value: 0
}];
HTML:
<select ng-model="TemplateObj.IsActive" ng-options="status.value as status.title for status in statuses"></select>
Here is jsfiddle with working example.
An option would be to make use of the ng-options directive.
The documentation is here and there are quite a few examples you can guide from.
Try ngOptions instead of normal HTML select.
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope) {
$scope.status = [{
title: 'In Development',
value: 2
}, {
title: 'Active',
value: 1
}, {
title: 'Inactive',
value: 0
}];
$scope.TemplateObj = {
"IsActive": 1
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<select ng-model="TemplateObj.IsActive" ng-options="option.value as option.title for option in status"></select>
</div>
I have two drop downs .One to show departments and other to show sections on change of department .
<div class="row" ng-controller="cascaded as cas">
<div class="form-group">
<label for="select-department" class="control-label col-md-2">Department</label>
<div class="col-md-4">
<select id="select-department" class="form-control" name="department" ng-model="myModel.department"
ng-options="option.name for option in departments track by option.id">
<option value=""></option>
</select>
</div>
<label for="select-department" class="control-label col-md-2">Section</label>
<div class="col-md-4">
<select id="select-section" class="form-control" name="section" ng-model="myModel.section"
ng-options="option.name for option in sections track by option.id">
<option value=""></option>
</select>
{{myModel.section}}
</div>
</div>
</div>
It works fine for me . If I change department all respective section gets updated and if I select any section respective section also gets assigned to the model . But the problem is if second time I change my department value, section drop down gets updated the model value doesn't reset to blank . It still shows the last selected value .
var app = angular.module("mainApp", []);
angular.module("mainApp").controller("cascaded", function ($scope, $filter) {
$scope.departments = [
{
id: 1, name: "Dep A"
}, {
id: 2, name: "Dep B"
}, {
id: 3, name: "Dep C"
}];
var sections = [
{
id: 1, name: "Sec A", parentId: 1
}, {
id: 2, name: "Sec B", parentId: 2
}, {
id: 3, name: "Sec C", parentId: 3
}];
$scope.$watch("myModel.department", function (newVal) {
if (newVal) {
$scope.sections = $filter("filter")(sections, { parentId: newVal.id });
}
});
})
I want to reset my model value when section drop down gets refreshed with new data .
You need to assign the sections value to your mymodel.section value
$scope.myModel.section= $scope.sections;
Because $scope.myModel.section is does not update, when you changing the department,
Your watch event should be
$scope.$watch("myModel.department", function (newVal) {
if (newVal) {
$scope.sections = $filter("filter")(sections, { parentId: newVal.id });
**$scope.myModel.section= $scope.sections;**
}
});
Fiddler Demo
Simply put one method in ng-change of department like:
<select id="select-department" class="form-control" name="department" ng-model="myModel.department"
ng-options="option.name for option in departments track by option.id" ng-change="setBlank()">
<option value=""></option>
</select>
And in the method setBlank() set myModel.section to blank like this:
$scope.setBlank=function(){
$scope.myModel.section='';
}
I need to show current location storage or current employee wheres the inventory is at the moment
<select class=" form-control" ng-model="location.name">
<option value="">Choose Location</option>
<optgroup label="Locations">
<option value="{{location.resource_uri}}" ng-repeat="location in locations">{{location.name}}</option>
</optgroup>
<optgroup label="Holder">
<option value="{{user.resource_uri}}" ng-repeat="user in users">{{user.first_name + ' ' + user.last_name}}</option>
</optgroup>
</select>
Can I put in ng-model two values, so if location is not null, i get current Location, if the location is null , i get employee name selected.
Take a look at this
Working Demo
html
<div class="form-control" ng-app="main" ng-controller="Controller">
<select ng-model="category">
<optgroup ng-repeat="category in categories" label="{{ category.name }}">
<option ng-repeat="subCat in category.items">
<span ng-switch="category.name">
<span ng-switch-when="Location">
{{ subCat.name }}
</span>
<span ng-switch-when="Holder">
{{subCat.first_name+" "+subCat.last_name}}
</span>
</span>
</option>
</optgroup>
</select>
{{category}}
</div>
script
var main = angular.module('main', []);
// Main Controller
main.controller('Controller', function ($scope) {
$scope.categories = [{
id: 5,
name: "Locations",
items: [{
resource_uri: 'ABC',
name: "ABC-Name"
}, {
resource_uri: 'XYZ',
name: "XYZ-Name"
}, {
resource_uri: 'LMN',
name: "LMN-Name"
}, {
resource_uri: 'PQR',
name: "PQR-Name"
}]
}, {
id: 17,
name: "Holder",
items: [{
first_name: 'Manu',
last_name: 'Mathew'
}, {
first_name: 'Sunny',
last_name: 'Mathew'
}, {
first_name: 'Jacob',
last_name: 'Mathew'
}, {
first_name: 'Vijay',
last_name: 'Mathew'
}]
}];
});
I am trying to populate States in Select with ng-options. As i am new to angular, result doesn't come as expected.
Controller
$scope.statesList = function () {
StatesList.query(function (states) {
$scope.states = states;
});
};
Html
<td data-ng-init="statesList()">
<select ng-model="practiceAdd.state" name="state{{$index+1}}" ng-class="{'has-error': editForm.{{$index+1}}.$invalid}"
ng-options="state in states" required>
</select>
</td>
Array
$$hashKey: "05S"
_id: "53107e099d985dc404000015"
city: "mumbai"
country: "india"
state: "AR"
street: "1"
zipcode: 42101
Try like This..
In HTML
<select name="countries" id="countries" ng-model="countryCode" ng-options="country.code as country.name for country in countries"></select>
In angular JS Code
$scope.countries = [
{
name: 'Poland',
code: 'PL'
},
{
name: 'United Kingdom',
code: 'UK'
},
{
name: 'United States of America',
code: 'USA'
}
];
$scope.countryCode = 'UK';
Working Exaple
In your Example ;
<td>
<select ng-model="state.Id" name="state{{$index+1}}" ng-options="state.Id as state.name for state in states" required>
</select>
</td>
State id and state name should be defined by you.