When running the code below in my angular 1.x app I can see the first line returns the following :
[ { "id": 121, "valid": true }, { "id": 123431, "valid": false } ]
However when I try to display the valid or id property in the ng-repeat on the following line I see nothing whatsoever? What am i doing wrong??
{{ allItems | json }}
<div ng-repeat="item in allItems">
{{ item.valid }}
</div>
Related
I got the following json as source:
"available_examinators": [
{
"id": 4,
"user": {
"email": "mail",
"first_name": "First_name",
"last_name": "Last_name",
},
"courses": [
{
"id": 1,
}
]}]
together with the following html:
<md-option ng-value="examinator"
ng-repeat="examinator in uf.data.orderData.available_examinators
track by examinator.id |
filter: { examinator {courses : { id : course.id }}}">>
I want to filter so it only shows examinators that have an specific course id but I dont get it to work.
Above was almost correct but it led me to the right answer, beside the above changes I had to move track by to the end of the expression else I tried to filter on only examinator.id
So the correct answer is:
<md-option ng-value="examinator" ng-repeat="examinator in uf.data.orderData.available_examinators | filter: { courses: {id: course.id}} track by examinator.id">
You are very close, this is the correct syntax:
<md-option ng-value="examinator"
ng-repeat="examinator in uf.data.orderData.available_examinators
| filter: {courses : { id : course.id }} track by examinator.id">
Check a working demo: DEMO
EDIT: the track by expression must come last - after any filters, and the alias expression
Here i am trying to get Unit type from db(using asp.net mvc core)& in the view trying to bind to multi select drop down list.
html code of a dropdown,
<div name="dropdown" class="ui fluid multiple search selection dropdown">
<input class="search" tabindex="0">
<div class="default text">Unit type filter</div><i class="dropdown icon"></i>
<input type="hidden" name="temporary">
<div class="menu"></div>
</div>
$('.ui.dropdown').dropdown({
apiSettings: {
url: 'api/projectSearch/GetUnitType'
},
maxSelections: 3,
localSearch: true,
saveRemoteData: false,
debug: true,
fullTextSearch: true
});
The result i get from an API is,
{
"results": [{
"name": "FCC",
"value": "FCC",
"text": "FCC"
}, {
"name": "Utilities",
"value": "Utilities",
"text": "Utilities"
}, {
"name": "Visbreaking",
"value": "Visbreaking",
"text": "Visbreaking"
}],
"success": true
}
Am able to view the list & select multiple unit types from the dropdown. but local search with these items doesnt work. if i type in the dropdown i don't get the intellisense. i have tried with a basic dropdown also thinking that above dropdown may have some issues,
But still no luck. Note that am using angular 1.6.1 & am not writing any controller code to get unit types.basically apiSettings gets me the data.
where am i missing? please correct me.
currently I have this JSON object:
{
"hospitalId" : "0002",
"name" : "test form",
"procedureId" : "0002-testform",
"steps" : [
{
"title" : "Brand",
"value" : [
"jonson",
"smith",
"braun"
]
},
{
"title" : "Procedure type",
"value" : [
"total",
"unicompartimental"
]
}
]
}
And I need to display it on a multiselect, like this:
<strong>Brand</strong>
<ul>braun</ul>
<ul>jonson</ul>
<ul>smith</ul>
<strong>Procedure type</strong>
<ul>total</ul>
<ul>unicompartimental</ul>
They need to be ordered by steps.title and by steps.value, the thing is: I can't figure out how to display them correctly with a <select ng-options> tag, this is what I've tried:
<select multiple ng-model="step" ng-options="step[0].value group by step.title for step in loadedSteps.steps " ></select>
Gives me: Brand undefined
<select multiple ng-model="step" ng-options="step.value group by step.title for step in loadedSteps.steps | orderBy:['value']"></select>
Gives me: Brand [jonson, smith, braun]
Also I've tried with a nested <option> but it doesn't have ordering...
Any help would be very appreciated, thanks in advance
Here is the answer you are looking for.
You should use two ng-repeat, first for displaying title and other for displaying values inside the title.
The first ng-repeat starts with the title and ends with the values in that title.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names =
{
"hospitalId": "0002",
"name": "test form",
"procedureId": "0002-testform",
"steps": [{
"title": "Brand",
"value": [
"jonson",
"smith",
"braun"
]
}, {
"title": "Procedure type",
"value": [
"total",
"unicompartimental"
]
}]
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div >
<label>{{step.title}}</label>
<select>
<option ng-repeat-start="step in names.steps | orderBy:'title'" ng-bind="step.title"></option>
<option ng-repeat-end ng-repeat="opt in step.value | orderBy:'step.value':true" ng-bind="' - ' + opt"></option>
</select>
</div>
</div>
</body>
</html>
Please run this snippet
HEre is a plunker
I was wondering, how do I put a filter a ng-repeat that will only bring back items that have colours? I was hoping to have a checkbox above the grid entitled "Show ones with colours" that would filter the list based on the count of the colours array when it was selected, and display ALL when unselected.
{
"_id": "54d13c3f3c25d5d8123a1d62",
"name": "Barry",
"colours": ["239, 101, 128"]
},
{
"_id": "54d13sfg5d5d8hgf6gg",
"name": "John",
"colours": []
},
{
"_id": "34d13sfg5d5d4tt6g",
"name": "Andrew",
"colours": []
},
{
"_id": "44d165d5d4t77t6g",
"name": "Gary",
"colours": ["25, 234, 22", "5, 100, 255"]
},
The following would give everyone not having colours:
<div ng-repeat="item in items | filter: { colours: '!' }">
Negate it again and you get everyone having colours:
<div ng-repeat="item in items | filter: { colours: '!!' }">
Demo: http://plnkr.co/edit/oIl3ohe0TLMWcQlTPuY5?p=preview
I think you an use a controller function to test for the presence of colours
so in haml/coffeescript
%tr{"ng-repeat2 => "item in list | filter: hasColour(item)"}
and hasColour is a controller function
$scope.hasColour= (item) ->
item.colours.length > 0
Untested I'm afraid
I have a simple JSON object in my models
whitelist = [
{
"name": "Whitelist #1",
"permissions": [
"production_sdk",
"source_sdk",
"service"
],
},
{
"name": "Whitelist #2",
"permissions": [
"production_sdk",
"service"
],
},
{
"name": "Whitelist #3",
"permissions": [
"production_sdk",
"source_sdk"
],
}
]
In my html I have {{ whitelist.permissions }}, but the HTML displays the values with brackets - ['production_sdk', 'source_sdk'].
How can I display the HTML so that there are no brackets?
whitelist.permissions is an array, how do you want that to be displayed in your html? You should probably create a simple filter that takes an array and outputs what you want, but you could just change your html to do this to get a comma-separated list:
{{ whitelist.permissions.join(', ') }}
Another option, especially if you want to style each permission, is to use ng-repeat and html elements:
<span ng-repeat="permission in whitelist.permissions"><span ng-if="$index != 0">, </span>{{ permission }}</span>