Okay guys, here is my problem:
I have to make list of categories which show only elements of that category when selected ( and hide rest ). I have decided to go with radio buttons / every category has its own radio button.
Code for adding categories is next:
APP.js
controller('FamiliesCtrl', function($scope) {
$scope.families = ['All', 'Stark', 'Lannister'....];
$scope.selfamily = {selfam: 'All'};
}).
HTML
<form ng-controller="FamiliesCtrl">
<input type="radio" ng-model="selfamily.selfam" ng-repeat="family in families" ng-value="family" name="selfam">
</form>
And I am trying to trigger ng-show in html which has next code:
<div id="characters" class="row col-xs-9" ng-controller="CharacteresCtrl">
<div class="character col-xs-3" ng-repeat="character in characters | orderBy:sortParameter | limitTo: 120" char-image="{{character.picture}}" ng-show="selfamily.selfam === '{{character.house}}' || selfamily.selfam === 'All'">
<h1>{{character.name}}</h1>
</div>
</div>
Okay, now. This doesn't work BUT if I insert categories manually in this format:
<input class="checkboxHidden" id="first" type="radio" name="selfam" ng-model="selfamily.selfam" value="All">
... and so on...
IT DOES WORK. Your help would be much appreciated. If I need to provide any more code, please let me know.
Just to sum up, dinamically/programatically added category does not have any power on ng-show while manually added works just fine...
You don't need interpolation to access the value of character.house. This should work:
ng-show="selfamily.selfam === character.house || selfamily.selfam === 'All'"
...
Looking closer at your code, the values set by your radio buttons exist in a different controller than the list of characters. You'll have to use a single controller for all values, or use a service to share values between controllers.
Related
I have to develop a configuration screen where I have to fetch a set of key pair values from db and show in the UI to update the configuration. Here, when the value is 'TRUE' or 'FALSE', I have to show the input control as checkbox and for the rest of the values, I have to show the input control as textbox. I have used ng-repeat for single input control. But here I need to show two input controls (checkbox / textbox) based on the value. Can you please give me an idea on how to use ng-repeat to implement with multiple input controls ?
How about something like this:
<div ng-repeat="item in items"
ng-init="item.showCb = item.value == 'TRUE' || item.value == 'FALSE'">
<input type="checkbox"
ng-if="item.showCb" />
<input type="text"
ng-if="!item.showCb" />
</div>
JSFIDDLE
I have been wanting to have a radio button checked out of a list of radio buttons that I present in the screen using ng-repeat, but my code does not work. This is what I am doing:
<div class="clubRole" data-ng-if="club.checked">
<div data-ng-repeat="role in securityGroups.slice(0,1)">
<input type="radio" class="clubRole" data-ng-model="club.role" data-ng-value="role.securityGroupCode" checked="checked"> {{role.description}}
</div>
<div data-ng-repeat="role in securityGroups.slice(1,securityGroups.length+1)">
<input type="radio" class="clubRole" data-ng-model="club.role" data-ng-value="role.securityGroupCode"> {{role.description}}
</div>
</div>
The intention of the code is to get the first radio button checked, and the others unchecked. That code has a problem: it does not work. But at least it gives the idea of what I am trying to do: I want one of the radio buttons checked by default, no matter which one it is.
Radio button will be check if the value of the input attribute is equal to the value of modal applied on the radio button.
<div ng-repeat="val in ['a','b','c']">
<input
type="radio"
name="val"
data-ng-model="role"
data-ng-value="val"
ng-init="$index==0?(role=val):''"
/>
{{val}}
</div>
Checked="checked" will not work in angular context. You can either set the value of radio button explicitly in controller or you can manage it in the view itself as i did in the above example.But the modal should be equate according to the value attribute on the inmput element.
For example if modal is x on three radio button's and each radio button have different value like a,b and c. then x must be equal to any of the value to be checked.
Plunker
You don't need to worry about checked.
HTML:
<div ng-app="app">
<div ng-controller="mainController">
<label ng-repeat="option in options">
<input type="radio" ng-model="$parent.selected" ng-value="option"/>{{option}}
</label>
</div>
</div>
JavaScript:
var appModule = angular.module('app', []);
appModule.controller('mainController', function($scope) {
$scope.selected = 'red';
$scope.options = ['red', 'blue', 'yellow', 'green'];
});
Working fiddle here: https://jsfiddle.net/qnw8ogrk/1/
You don't need checked="checked", I think angular will take care of it itself if you set the model to one of the values. Something like:
club.role = securityGroups.slice(0,1)[0].securityGroupCode;
Also, the scope may trip you up here, the model may have to be $parent.club.role
if you use a primitive type in list, the answer of bm1729 is correct, but if you use objects in the list, then look this example: https://jsfiddle.net/9chd58mk/2/
the first part is bad, because the selected object is look like same with a list item, but it doesn't same by reference. the == operator is false in this case
$scope.selected = {c:'red'};
$scope.options = [{c:'red'}, {c:'blue'}, {c:'yellow'}, {c:'green'}];
but the second and third examples are use the list item reference, and the radio button checked. the == operator is true in this case
$scope.options3 = [{c:'red'}, {c:'blue'}, {c:'yellow'}, {c:'green'}];
$scope.selected3 = $scope.options3[0];
<md-radio-group ng-model="data.group3">
<md-radio-button value="{{o._id}}" class="md-primary" ng-repeat="o in lstDataRecord" ng-click="updTemplateId(o._id)">
<div flex-gt-sm="50" style="height: 150px; width: 250px;">
<img src="{{PageInfo_PATH}}{{o.imgUrl}}" />
{{o.displayName}}
</div>
</md-radio-button>
<md-radio-button value="active" class="md-primary" [checked]='true'> </md-radio-button>
</md-radio-group>
I have a list of data, this data is filtered by a dropdown menu.
The problem is, i want the filtering to be triggered only on a button click, not on the dropdown change.
<select ng-model="annee" ng-options="annee.titre for annee in annees track by annee.id">
</select>
<input type="submit" name="submit" value="Filtrer">
<ul>
<li ng-repeat="x in accueils | filter:annee" >
{{x.titre}}
<div ng-bind-html="x.description | to_trusted"></div>
{{x.date}}
{{x.cout}} $
{{x.participants}} participants
</li>
</ul>
Here is a working example :
http://plnkr.co/edit/MbfrhdKfbTObybsQvxrR?p=preview
I want the filter to be triggered on clicking on the "filter" button
Is it possible ?
Thanks a lot!
Note that your filter code here doesn't match your Plunker; it's filter:{annee:annee.id} in the Plunker.
You want to decouple the ng-repeat from the ng-model. One way to do this is to filter based on a new property and update that property only when the Filter button is clicked.
In your HTML:
Add a <form> element and set ng-submit to call submit() when the Filter button is pressed:
<form ng-app="myApp" ng-controller="customersCtrl" ng-submit="submit()">
Change the ng-repeat filter to use a new property instead of the property used by the <select> element's ng-model:
<li ng-repeat="x in accueils | filter:{annee:currentAnnee.id}">
In your controller:
Create the new property initialized with an invalid id:
$scope.currentAnnee = {
"id": 0
};
Create a submit() function that sets the new property from the <select> element's ng-model:
$scope.submit = function() {
$scope.currentAnnee = $scope.annee;
};
See this Plunker for a complete example.
As pointed by #msmolens, there were some differences in your plunker and the code you posted here. Secondly, the two arrays that you have used, have nothing in common so for demonstration purposes i have changed the structure of the second array that will be used as filter.
To start with, decouple your Array filter from the model value of the select drop down.
<select ng-model="annee" ng-options="annee.date for annee in annees track by annee.id">
</select>
<input type="submit" name="submit" value="Filtrer" ng-click="filter()">
<ul>
<li ng-repeat="x in accueils | filter:filterExpr" >
{{x.titre}}
<div ng-bind-html="x.description | to_trusted"></div>
{{x.date}}
{{x.cout}} $
{{x.participants}} participants
</li>
</ul>
As visible in the code, we have a model variable for the filter expression in the ng-repeat.
We then initialize the filter expression with a blank value.
$scope.filterExpr = {"date" : ''};
There after, you just need to capture ng-click of the filter button and modify the variable being used as a filter.
$scope.filter = function() {
$scope.filterExpr = {"date" : $scope.annee.date};
};
You can find the updated plunker here.
I'm working on an angular 1.2.x project and I have a list of radio button generated with ng-repeat and an array of objects.
markup
<div ng-repeat="answer in question.answers track by $index">
<label>
<input type="radio" name="answers" ng-value="answer" ng-model="myDataModel">{{answer.text}}
</label>
</div>
array
[
{
"id":"0",
"parentId":"0a4540dfec6549b4a3bd1b8fb6169d77",
"text":"peanuts"
},
{
"id":"1",
"parentId":"deka9fkac6549b4a3bd1b8fb6169d77",
"text":"cashews"
},
{
"id":"2",
"parentId":"0a4540dfec6asdf4a3bd1b8fb6169d77",
"text":"brazil nuts"
}
]
If I use pre tags to view my model as I select through the radios like this...
<pre>{{myDataModel | json}}</pre>
I see random properties climbing onto my data like this
{
"id":"0",
"parentId":"0a4540dfec6549b4a3bd1b8fb6169d77",
"text":"peanuts",
"spc_mXSzO":0,
"idx_mXSzO":0
}
This is causing issues when I try to pre-select a radio button after loading data from my server. When my controller sets my model equal to one of the answers it doesn't have those properties so it doesn't select the radio. Additionally those property names change every time that I refresh the page so I'm not able to mock them. Where do these come from and what might I try to get around them when preselecting answers?
Alright, I found the culprit. It was this library https://github.com/isteven/angular-multi-select
It attaches spc and idx properties for it's purposes.
I can't reproduce what you're seeing either - here's a plunker with what you have above working:
http://plnkr.co/edit/1td3XtqQjMDk1XYBbjEn?p=preview
One issue which what you have is the ng-model directive in your input tag. You shouldn't bind to primitives directly on the $scope. Here's a good description of why:
https://github.com/angular/angular.js/wiki/Understanding-Scopes
And an update to your code:
<div ng-repeat="answer in question.answers track by $index">
<label>
<input type="radio" name="answers" ng-value="answer" ng-model="myDataModel.myAnswer" />{{answer.text}}
</label>
</div>
Hey guyz i am having issue related to checkboxes in html, i am using angularjs.
Whenever i checked one checkbox other checkbox getting selected and vice-versa.
Here's my Html code.
<form ng-show='MyForm'>
<div ng-controller="MyController">
<div name="sampleName" ng-repeat="sample in list" >
<input ng-model="q.sample" type="checkbox" >{{sample.name}}</label>
</div>
</div>
<button ng-click="submitForm()" >Submit</button>
<button ng-click="cancelForm()">Cancel</button>
</form>
But instead of using scope variable name 'q.sample', if i use only $scope.sample then it is working fine.
Still there is another issue with this too, On submitting data my form gets closed, but when i open it again, it shows me fresh form, there is no checked field, but if i cancel the form instead of submitting it with checked values and again opened it , i dont want the checked values to be present but i am getting the checked values instead of fresh form.
I tried to make values false in checkbox field on cancel button . See my Code of cancelForm()
$scope.cancelForm = function() {
$scope.MyForm = false
$scope.q.sample = false
}
So Basically, i have two questions, one is why i am getting all checkboxes selected on selected only one checkbox when i am using
$scope.q.sample
Second when i am using only
$scope.sample
scope value of sample is not reflecting on UI though it is reflecting in JS, i am getting the checked checkboxes.
It is because you are binding ng-model to the same controller property with this:
ng-model="q.sample"
Instead, if you want to select each individually then you need to have a different ng-model for each checkbox.
At the moment, you are changing q.sample and this, then, binds the value of q.sample to all the other checkboxes that define ng-model="q.sample".
Try something like this instead:
<div name="sampleName" ng-repeat="item in list" >
<input ng-model="item.checked" type="checkbox" >{{sample.name}}</label>
</div>
and then in cancelForm():
$scope.cancelForm = function() {
$scope.MyForm = false
angular.forEach($scope.list, function(item) {
item.checked = false;
});
}
Indeed as David Tryon mentioned, you are assigning the same ng-model to all the checkboxes and what you want is a different ng-model for each checkbox.
You can solve this by assigning a javascript expression to ng-model
for example:
ng-model="list[$index].checked"