I have a JSON object in the following format:
{
filters: [
{Name: "pork",
Active: true},
{Name: "beef",
Active: true},
{Name: "chicken",
Active: false}
]
}
I am constructing a SELECT list with the following:
ng-options="item.Name for item in filters"
I want to only construct an option if the "Active" key is true. Is there a way for me to do this in the psuedo-JavasScript inside of the Angular directive?
Try ng-options="item.Name for item in filters | filter:{ Active : true }".
Related
I need style to option (similar AngularJs Material), which inside select with ng-options. How I can do it? What is the best and simple way?
index.html:
<select ng-model="$ctrl.orderBy"
ng-options="option.name for option in $ctrl.options.sort">
</select>
contoller.js :
this.options = {
sort: [
{
name: 'alphabetically',
value: 'name',
reverse: false
},
{
name: 'index',
value: 'code',
reverse: false
}
]
};
this.orderBy = this.options.sort[0];
I wrote a little program in Angular using ui-select elements. Here is the html code :
<ui-select ng-model="test.selectedContract">
<ui-select-match >
{{$select.selected.name}} - {{$select.selected.value}} ---- {{$select.selected.id.id}} *** {{$select.selected.policy.info.name }}
</ui-select-match>
<ui-select-choices group-by="groupByLetter"
repeat="contract in (contracts |
orSearchFilter: {id.id: $select.search, policy.info.name : $select.search} |
orderBy: 'name') track by contract.name">
{{contract.name}} - {{contract.value}} ---- {{contract.id.id}} *** {{contract.policy.info.name }}
</ui-select-choices>
</ui-select>
And here is the structure of my contracts object :
$scope.contracts = [{
name: "contract1.00",
value: 10,
id: {
id: 8000,
code: 2
},
policy: {
info: {
name: "test1",
country: "test"
}
}
}, //other contract objects
Finally, there is my plunker code : http://plnkr.co/edit/PigjGCj5ukxscJC7Wl97?p=preview
The problem is that I want to display "All" as a default value (if there is no selection) while my default value in my plunker is : " - ---- *** "
Can you please help me to set this default value please?
Thanks !
You could define a sort of toString function in your controller and put the result of that in the ui-select tag, instead of hard-code dashes and stars. If value is null, it should return "All"
Just set the
$scope.test.selectedContract = {
name: "all",
value: 10,
id: {
id: 8000,
code: 2
},
policy: {
info: {
name: "test1",
country: "test"
}
}
}
DEMO
I have tried to use ng-options in this json array
$scope.new_user = [
{
id_usuario: 0,
usuarioNome: '',
usuarioAD: '',
perfil: [{ master: "Não", id: 0 }, { master: "Sim", id: 1 }],
acesso: [{ restringir: "Não", id: 0 }, { restringir: "Sim", id: 1 }]
}];
<select ng-options="perfil as perfil.master for perfil in new_user" ng-model="perfil"></select>
What I'm doing wrong?
Thanks all
You should check:
<select ng-model="perfil" ng-options="perfil as perfil.master for perfil in new_user[0].perfil"></select>
You ng-model is what is selected.
You should have something like this :
<select ng-options="perfil as perfil.usuarioNome for perfil in new_user" ng-model="selectedPerfil"></select>
To avoid a blank anwser in your selected you should set selectedProfil in your controller :
$scope.selectedPerfil = $scope.new_user[0];
js:
$scope.tasks = [{ Name: "Deliverable", Id: "Deliverable" },
{ Name: "Email", Id: "Email" }]
$scope.currentTask = {Subject: "Deliverable"}
html:
<select ng-model="currentTask.Subject" ng-options="task.Id as task.Name for task in tasks"></select>
result:
No option is selected when page load. But the dropdown works well. Am I missing anything?
I have a form that has a set of radio buttons (3 choices), and I am using angular and the ng-repeat directive to populate the html:
<div ng-repeat="fruit in fruitbasket">
<input type="radio" name="fruit" data-ng-model="fruit.isSelected">{{fruit.id}}
</div>
the inside of the controller for the fruit basket looks like this:
$scope.fruitbasket = [{isSelected: false, id: "Orange", value: "1"}, {isSelected: true, id: "Pear", value: "2"}, {isSelected: false, id: "Apple", value: "3"}]
The choices in the view are Orange, Pear, and Apple, but after one is selected I want to pass the numeric "value"
Not sure how to do this in angular, I have tried several things, but non successful. Each time the passed value shows as nil
How does a connected element of an object get passed from a radio button in Angularjs?
Here's how you do it:
isSelected is not needed. The fruitbasket is not part of your model, only the selected fruit is.
$scope.fruitbasket = [
{id: "Orange", value: "1"},
{id: "Pear", value: "2"},
{id: "Apple", value: "3"}
];
$scope.model={selectedFruit:2};
Assign the value (fruit.value) to each option and bind it to your model (model.selectedFruit)
<input value="{{fruit.value}}" data-ng-model="model.selectedFruit" type="radio" name="fruit" > {{fruit.id}}
Check out this working plnkr example.