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
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 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.
i need some help to make nested ng-repeat.
I have the following code which which is not nested.Currently it prints all subject first and than it prints all student names.
However, I need to print students for each subject.
How i can convert it in nested ng-repeat?
<tr>
<td>Student</td>
<td width="100px" ng-repeat="subject in subjects" colspan="3">{{subject.Name}}
</td>
</tr>
<tr>
<th width="296"></th>
<th class="rotate-45" ng-repeat="student in studentNames">
<div>
<span>{{student}}</span>
</div>
</th>
</tr>
Here is example for nested ng-repeat. this might be helpful to you.happy coding
<body ng-app="WeeklyApp" ng-controller="WeeklyController" >
<div ng-repeat="week in myData">
<div ng-repeat="day in week.days">
{{day.dow}} - {{day.templateDay}}
<b>Jobs:</b><br/>
<ul>
<li ng-repeat="job in day.jobs">
{{job.name}}
</li>
</ul>
</div>
</div>
</body>
<script>
var WeeklyApp = angular.module('WeeklyApp', []);
WeeklyApp.controller('WeeklyController', ['$scope', function ($scope) {
$scope.myData = [{
"number" : "2013-W45",
"days" : [{
"dow" : "1",
"templateDay" : "Monday",
"jobs" : [{
"name" : "Wakeup",
"jobs" : [{
"name" : "prepare breakfast",
}
]
}, {
"name" : "work 9-5",
}
]
}, {
"dow" : "2",
"templateDay" : "Tuesday",
"jobs" : [{
"name" : "Wakeup",
"jobs" : [{
"name" : "prepare breakfast",
}
]
}
]
}
]
}
];
}]);
</script>
I'm trying to use orderBy functionality in angular, and order by RollNo but its not working please check my code below
SCRIPT
var countryApp = angular.module('countryApp', []);
countryApp.controller('CountryCtrl', function ($scope, $http){
$http.get('http://localhost/angular/jason/index.php').success(function(data) {
$scope.countries = data;
data.RollNo = parseFloat($data.RollNo);
});
});
JSON
data = [{
"Name": "Kamal",
"RollNo": "20",
"Class": "Class 12"
}, {
"Name": "Amar",
"RollNo": "12",
"Class": "Class 10"
}, {
"Name": "Rajesh",
"RollNo": "9",
"Class": "Class 7"
}]
HTML
<body ng-controller="CountryCtrl">
<input type="text" ng-model="name">
<table>
<tr>
<th>Name</th>
<th>Roll Number</th>
<th>Class</th>
</tr>
<tr ng-repeat="country in countries | filter:name | orderBy:'RollNo'">
<td>{{country.Name}}</td>
<td>{{country.RollNo}}</td>
<td>{{country.Class}}</td>
</tr>
</table>
</body>
You are doing data.RollNo = parseFloat($data.RollNo); that wont work, you need to loop throw object and do it.
You need to convert RollNo property of counrty object to number first then you can apply orderBy
CODE
var newArray = [];
angular.forEach($scope.countries, function(val, index){
newArray.push(val);
newArray[newArray.length-1].RollNo = parseInt(newArray[newArray.length-1].RollNo);
});
$scope.countries = newArray;
Working Plunkr
Hope this could help you. Thanks.
seems like your code is not correct
in
<tr ng-repeat="country in countries | filter:name | orderBy:'RollNo'">
you have used orderBy:'RollNo' and RollNo with in single quotes. that's the issue
change that to
<tr ng-repeat="country in countries | filter:name | orderBy:RollNo">
and it will work fine.
here is the Demo Plunker
i try to make a table with with an select each row. the data from table and the select field is from an array...
<div ng-app="app" ng-controller="MainCtrl">
<table>
<thead>
<tr>
<th>Headline #1</th>
<th>Headline #2</th>
<th>Headline #3</th>
<th>Headline #4</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>
<select name="" id="">
<option value="" ng-repeat="role in roles">{{role.name}}</option>
</select>
</td>
<td>anything...</td>
</tr>
</tbody>
</table>
angular.module('app', [])
.controller('MainCtrl', function ($scope) {
$scope.users = [
{
id : 1,
name : 'Andrew',
role : "admin"
},
{
id : 2,
name : 'Tanya',
role : "admin"
},
{
id : 3,
name : 'Roland',
role : "author"
},
];
$scope.roles = [
{
name : "author"
},
{
name : "admin"
}
];
});
see my example here:
jsFiddle
what i need is simple, each user has an role, and i would like that each row the correct role is selected...
sorry for my very bad english...
thx nathan
Add id field for the roles data list like this
$scope.roles = [{
id: "author",
name: "author"
}, {
id: "admin",
name: "admin"
}];
and change select element to
<select ng-model="user.role" ng-options="role.id as role.name for role in roles"></select>
Demo on jsFiddle