I have an array of subjects like:
`[
{ subject: 'Maths', preferred_teacher: '00000'},
{ subject: 'Chemistry', preferred_teacher: '11111'},
{ subject: 'Art', preferred_teacher: ''}
]`
And an array of teachers:
[{name:'Farmer', _id: '00000'},{name:'Smith', _id: '11111'}]
I need to create a form, where I will produce a list of subjects with a dropdown (select) for each one, allowing to pick the preferred teacher.
However, I don't know how I can make each (!) select initialized with Angular options show the presently selected preferred teacher.
Any help would be greatly appreciated - I have failed to apply other answers to my case.
EDIT:
Added property _id to reflect my particular case
Try this (updated based on OP edit):
var app = angular.module('app', []);
app.controller('MainCtrl', ['$scope',
function($scope) {
$scope.subjects = [
{subject: 'Maths', preferred_teacher: '00000'},
{subject: 'Chemistry', preferred_teacher: '11111'},
{subject: 'Art', preferred_teacher: ''}
];
$scope.teachers = [{name:'Farmer', _id: '00000'}, {name:'Smith', _id: '11111'}];
}
]);
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<div ng-app="app" ng-controller="MainCtrl">
<form>
<table>
<tr>
<th>Subject</th>
<th>Teacher</th>
</tr>
<tr ng-repeat="subject in subjects">
<td><span ng-bind="subject.subject"></span></td>
<td><select ng-model="subject.preferred_teacher"
ng-options="teacher._id as teacher.name for teacher in teachers">
</select></td>
</tr>
</table>
<br> {{subjects}}
</form>
</div>
Let me know if you have any questions.
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 have 2 scope. I want to find based on the id of the scope "country", the country's name.
How can I print "France" for John, in this example.
$scope.country = [
{id:"1",name:"France"},
{id:"2",name:"Spain"}
];
$scope.people = [
{name:"John",country:"1"},
{name:"Ben",country:"2"}
]
I tried :
<tr ng-repeat="k in people">
<td>{{k.name}}</td>
<td>{{country | filter : {"id" : k.country } }}</td>
</tr>
I dont know if I am doit it wrong or not, but I can only get the array, not the field name of the country.
Try like this.
var app = angular.module('anApp', []);
app.controller('ctrl', function($scope) {
$scope.country = [{
id: "1",
name: "France"
},
{
id: "2",
name: "Spain"
}
];
$scope.people = [{
name: "John",
country: "1"
},
{
name: "Ben",
country: "2"
}
]
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<div ng-app="anApp" ng-controller="ctrl">
<div class="form-group">
<table>
<tr ng-repeat="k in people">
<td>{{k.name}}</td>
<td ng-repeat="c in country | filter:{id:k.country}">{{c.name}}</td>
</tr>
</table>
</div>
</div>
Can set filter up this way:
<td>{{(country | filter : {"id" : k.country })[0].name }}</td>
DEMO
In my opinion, generally speaking, if you want to share or access data between different scopes, you have to use the rootScope, but I recommend you to always use services if you need to share some data between scopes.
So I think it's a matter of application design not how to implement this requirement in AngularJS.
Hope this could help you
I am using Checklist model directive with my App. I have issue, if -
I click select all button though it write up the array but its not
selecting checkbox. Same issue with Uncheck All though it empty the
model but it doesn't uncheck checkboxes.
If I select 2 or 3 randomly checkbox and click Select All Button it doesn't select All check-boxes.
Though its writing values to pushArray. But issues are checking and unchecking checkboxes.
$scope.items = [{id:1, name:"abc"},{id:2, name:"def"},{id:3, name:"ghi"}];
$scope.pushArray = [];
<table>
<tr ng-repeat="e in items">
<td class="text-right">
{{e.id}}
<input type="checkbox" checklist-change="imChanged()" checklist-model="pushArray" checklist-value="e.id" >
</td>
</tr>
</table>
I think you are pushing the complete list of object which is wrong. You just need to map the list and pass the id to the $scope
Edit: Works fine when you use $scope.pushArray as an object instead of array.
Working Plnkr
HTML
<body ng-controller="selection">
<table>
<tr ng-repeat="e in items">
<td>
<input type="checkbox" checklist-model="pushArray.ids" checklist-value="e.id"> {{e.name}}
</td>
</tr>
</table>
{{pushArray.ids | json}}
<br />
<button ng-click="select_all();">Select All</button>
<button ng-click="unselect_all();">Unselect All</button>
</body>
JS
var app = angular.module('app', ["checklist-model"]);
app.controller('selection', ['$scope', function($scope) {
$scope.items = [{
id: 1,
name: "abc"
}, {
id: 2,
name: "def"
}, {
id: 3,
name: "ghi"
}];
$scope.pushArray = { ids: []}; // Works fine when using it as an object
//$scope.pushArray = [];
$scope.select_all = function() {
$scope.pushArray.ids = $scope.items.map(function(item) { return item.id; });
};
$scope.unselect_all = function() {
$scope.pushArray.ids = [];
};
}]);
Hope it works for you!
I updated the examples on checklist-model and fix this issue. Check them out http://vitalets.github.io/checklist-model/
I want a simple order by three fields:
name, status and owner in that order
Up until now i had this:
<tr ng-repeat='data in model.tableData|filter:model.search|orderBy:"name":model.sorted.name'>
(the model.sorted.name is toggling true false when clicked on), Now i saw i need to do something like this:
<tr ng-repeat="data in model.tableData|filter:model.search|orderBy:['name','status','owner']">
To deal with multiple fields, but how can i change it from,
for example, the status from true to false, like i did with the single one?
You can use '!' ie :
<tr ng-repeat="data in model|filter:model.search|orderBy:['name','!status','owner']">
please demo below
var app = angular.module('app', []);
app.controller('homeCtrl', function($scope) {
$scope.model = [{
'name': 'a1',
'status': true,
'owner': 'as'
}, {
'name': 'a1',
'status': false,
'owner': 'as'
}, {
'name': 'a1',
'status': false,
'owner': 'as'
}
]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="homeCtrl">
<h3> By status reverse </h3>
<table>
<tr ng-repeat="data in model|filter:model.search|orderBy:['!status','name','owner']">
<td>{{data.status}}|{{data.owner}}| {{data.name}}</td>
</tr>
</table>
<hr/>
<h3> By status</h3>
<table>
<tr ng-repeat="data in model|filter:model.search|orderBy:['status','name','owner']">
<td>{{data.status}}|{{data.owner}}| {{data.name}}</td>
</tr>
</table>
</div>
</div>
I come from China,my English very poor,so I do a demo.how can I update array inside ng-repeat?
The HTML:
<body ng-app="main" ng-controller="DemoCtrl">
<table ng-table class="table">
<tr ng-repeat="user in users">
<td data-title="'Name'">{{user.name}}</td>
<td data-title="'Age'">{{user.age}}</td>
<td>
{{user.spms|json}}
<div ng-repeat="u in user.spms">
<span ng-bind="u"></span>
<input type="text" ng-model="u" ng-change='updateArray($parent.$index, $index, u)'>
</div>
</td>
</tr>
</table>
</body>
The JS:
var app = angular.module('main', []).
controller('DemoCtrl', function($scope) {
$scope.users = [{
name: "Moroni",
age: 50,
spms: [
6135.7678,
504.4589,
2879.164,
669.7447
]
},
{
name: "seven",
age: 30,
spms: [
34135.7678,
5034.42589,
22879.1264,
63469.72447
]
}
];
$scope.updateArray = function(parent, index, u) {
$scope.users[parent].spms[index] = u * 1; // multiply by one to keep the value a Number
}
})
There are issues here are every update is changing the scope, so you can only change one time them click then change - so I would recommend add a update values button and implementing more or less the same logic to update the array values.
DEMO