I have an angular model receives data from an API that looks like:
$scope.questions = [
{name: 'Question 1', options:['Option 1', 'Option 2', 'Option 3'],id: 1},
{name: 'Question 2', options:['Option A', 'Option B', 'Option C'],id: 2},
{name: 'Question 3', options:['Option a', 'Option b', 'Option c'],id: 3}
]
And, I would like to iterate over all the questions and have a series of one select box per question with the select's options coming from the question object
<div ng-repeat="question in questions">
<label>{{question.name}}</label><select ng-options="?"></select>
</div>
I am having trouble figuring out what the ? should be. I thought ng-options="o in question.options" might work, but no such luck. Can this be done? If so, how?
As per the documentation, it should be
o for o in question.options
Note that you'll need to specify an ng-model attribute for this to work:
<select ng-model="question.selectedOption" ng-options="o for o in question.options"></select>
Here's a plunk showing that it works.
Related
When I use ng repeat to build selector and I am using options with same value angulars returns 'Error: Duplicate md-option values are not allowed in a select. Duplicate value "1" found.'
angular.module('app',['ngMaterial'])
.controller('repeatCtrl', function($scope) {
$scope.items = [
{ value: 1, name: 'Item 1' },
{ value: 1, name: 'Item 2' },
{ value: 1, name: 'Item 3' },
{ value: 4, name: 'Item 4' },
{ value: 5, name: 'Item 5' },
];
});
<md-input-container>
<label>choose item</label>
<md-select ng-model="item">
<md-option ng-repeat="item in items" value="{{item.value}}">{{item.name}}</md-option>
</md-select>
</md-input-container>
Sorry, havent used material, but the below will work in regular angular and html.
<select ng-options="x as x.name for x in items" ng-model="item">
<option>Select something...</option></select>
and then use item.value where you need it
Does anyone know why AngularJS not selecting options on <select multiple> if ng-model is an array of integer?
$scope.selected = [1, 3]
$scope.options = [
{id: 1, title: 'option 1'},
{id: 2, title: 'option 2'},
{id: 3, title: 'option 3'}
]
Everything works just fine if $scope.selected = ['1', '3'] is array of string. I need to get it working without using ng-options.
Here is JSFiddle:
http://jsfiddle.net/maxflex/3jfk8/19/
I have created a select box in two different ways with AngularJS. One with static options in the HTML and ng-model and one with ng-options.
Both populate the select box, however, when a value comes back from the REST API the select box stays blank.
The docs suggest tracking by id.
<select id="delimiter" name="delimiter" ng-model="config.delimiter"
ng-options="option.name for option in data.availableOptions track by option.id">
</select>
$scope.data = {
availableOptions: [
{id: '44', name: 'Comma'},
{id: '9', name: 'Tab'},
{id: '32', name: 'Space'},
{id: '124', name: 'Pipe'},
{id: '59', name: 'Semi-Colon'},
{id: '58', name: 'Colon'}
],
selectedOption: {id: '44', name: 'Comma'} //This allegedly sets the default value of the select in the ui
};
//Truncated version of what happens after API call
$scope.config = $scope.result.selectedConfig;
The data that comes from the server contains the numbers i.e. the ids.
The config option is supposed to have the delimiter set on it and then the select box is supposed to select the correct item, but it doesn't.
However, a simple example like this DOES work at selecting the correct item so it must be something with the binding after the REST call.
<body ng-app ng-controller="AppCtrl">
<div>
<label>Delimiter</label>
<select ng-model="mydelimiter">
<option value="44">Comma</option>
<option value="9">Tab</option>
<option value="32">Space</option>
<option value="124">Pipe</option>
<option value="59">Semi-Colon</option>
<option value="58">Colon</option>
</select>
</div>
</body>
function AppCtrl($scope) {
$scope.mydelimiter = '59';
}
I'm not sure if this is exactly what you were looking for but if you'er just trying to set a specific default value, set the model to the selectedOption
$scope.config = {};
$scope.data = {
availableOptions: [
{id: '44', name: 'Comma'},
{id: '9', name: 'Tab'},
{id: '32', name: 'Space'},
{id: '124', name: 'Pipe'},
{id: '59', name: 'Semi-Colon'},
{id: '58', name: 'Colon'}
],
selectedOption: {id: '44', name: 'Comma'}
};
$scope.config.delimiter = $scope.data.selectedOption;
Or you could set it directly from the array:
$scope.config.delimiter = $scope.data.availableOptions[0];
Here's a fiddle with a working example:
http://jsfiddle.net/pkobjf3u/1/
How to implement the idea of a slider showing images and video.
How to get repetition via ng-repeat of different data types?
I have a list of files:
var scr = [
{src: 'img1.png', title: 'Pic 1'},
{src: 'img2.jpg', title: 'Pic 2'},
{src: 'vid1.mp4', title: 'Vid 1'},
{src: 'vid2.mp4', title: 'Vid 2'}
];
Images can be inserted through ng-repeate:
<div class="slide" ng-repeat="image in images" ng-show="image.visible">
<img src="./img/slides/{{image.src}}"/>
</div>
How to insert videos in this list?
Maybe there are other ways to get a slider?
I would be grateful for any help.
If you can modify the data array,
var scr = [
{src: 'img1.png', title: 'Pic 1', type: 'imge'},
{src: 'img2.jpg', title: 'Pic 2', type: 'imge'},
{src: 'vid1.mp4', title: 'Vid 1', type: 'video'},
{src: 'vid2.mp4', title: 'Vid 2', type: 'video'}
];
Then you can use ng-if to determine the element to use
<div class="slide" ng-repeat="media in scr">
<img ng-if="media.type == 'image'" ng-src="./img/slides/{{media.src}}" />
<video ng-if="media.type == 'video'" ng-src="{{media.src}}"></video>
</div>
have you seen http://www.nganimate.org/angularjs/ng-switch/slider-css3-transition-animation this? for different data-types use
ng-switch on="image"
and then compare it with src or title
ng-switch-when="image.src == 'video'"
#.... render video object here
ng-switch-default
do some default behaviour of showing your image
sorry missed the type thing in your src, or you can split your string and use the same as well :) your choice
I'm trying to create a data store with an array reader. in each of the record, there is an array of fields. However, I only need some of the fields in the record. How can I setup the array reader so that only part of the record is mapped to the data store?
For each field in the reader, just add a 'mapping' item and set it equal to the index of the item in the array it is for. eg:
var arrData = [
['Col 1', 'Col 2', 'Col 3']
['Col 1', 'Col 2', 'Col 3']
['Col 1', 'Col 2', 'Col 3']
];
var reader = new Ext.data.ArrayReader({}, [
{name: 'First Column', mapping: 0},
{name: 'Third Column', mapping: 2},
]);
This will exclude the 2nd column (zero based index)