The objective is to combine the rating provided here in example:
http://angular-ui.github.io/bootstrap/#/rating
w/ the collapse here:
http://angular-ui.github.io/bootstrap/#/collapse
Is it possible to make use the rating implementation and have each star binded to a unique collapse and message.(i.e. clicking 1 star collapses a message saying "you selected "{{rating}}" star!"
I was trying to use ng-switch at first, but any suggestions would be appreciated.
Does something like this suit your needs ?
http://plnkr.co/edit/cGxCRDWb3OX5RzJjSwUV?p=preview
I just made the collapse condition equal to rating ng-model so the message only shows when there is a rating selected.
Related
Am currently learning Selenium on my own . i am trying to automate the below demo website https://itera-qa.azurewebsites.net/home/automation.
There is a section of radio button to select gender. i was trying to find the number of elements under that particular section . Page has another section of radio button too
If u notice the label gender it is not directly associated to the parent above ]1
Please help me to find the xpath so that i can find the number of radio buttons in the particular section rather than that of the whole page . i spent lot of time in tweaking this
Well, to select the Female radio button you should click on the label element above it. The Xpath for that label element is
//label[.//input[#id='female']]
or
//input[#id='female']/..
(Both are correct).
Similarly, to select Male radio button you can use
//label[.//input[#id='male']]
or
//input[#id='male']/..
Try below xpath to count the radio button under Gender section.
//div[contains(#class,'body-content')]/div[3]//input[#type='radio']
Below code is in python, but you should be able to understand what I am doing
driver.implicitly_wait(10)
driver.get("https://itera-qa.azurewebsites.net/home/automation")
time.sleep(5)
radio = driver.find_elements_by_xpath("//div[contains(#class,'body-content')]/div[3]//input[#type='radio']")
print(len(radio))
Output:
3
Split the xpath to understand.
//div[contains(#class,'body-content')]- points the entire page,
//div[contains(#class,'body-content')]/div - gives all 6 parts of the form.
//div[contains(#class,'body-content')]/div[3]` points to the 3rd `div` where the required radio buttons exists and
//div[contains(#class,'body-content')]/div[3]//input[#type='radio']` points to `input` tags with `type` `radio` only. Replace `radio` with `checkbox` to point only on the checkboxes
Suppose you want radio buttons of `Years of experience in test automation` below is the xpath. Its the 5th `div` tag in the entire page.
//div[contains(#class,'body-content')]/div[5]//input[#type='radio']
I have a kendo grid with a column consisting of radio buttons.
I want to make the radio buttons act as radio buttons(check only 1) and get the selected 1.
Here is a sample Demo
You were pretty close. First a few things about radios:
Radio buttons are grouped using the name attribute
Radio buttons are bound to labels via the for attribute on the label element matched with the id attribute on the radio button
The problem with your code is that all radios have the same id, which is why clicking any radio button toggles the first one ... because the first element found with that id is grabbed, with the assumption that there'd only be one.
In order to fix this, you need a unique id for each radio button, and you can do that by referencing the EmployeeID in the data source using the #: EmployeeID# notation, as exemplified in the docs
Therefore your template would look like this:
template: '<input type="radio" name="customer" id="customer_#: EmployeeID#" class="k-radio"><label class="k-radio-label" for="customer_#: EmployeeID#"></label>'
Please find working example here: https://dojo.telerik.com/aRuQubep/5
Hope this does the job :)
I have a flow of three div working with each other (and 3 arrays)
The idea is to select some options on the first div (from the first array), those options are passed inside the second one (and the second array).
I have an ng-repeat inside the second div which displays the selected options with, for each one, four radio buttons.
The radio buttons have an ng-click value which will add the option associated to the radio button value to the third array and will allow to sort the options by the different radio buttons checked.
DIV1 DIV2 DIV3
|option1| |option2| radio1 : option2
|option2| oradio1 oradio2 oradio3 radio3 : option4
|option3| --> |option4| -->
|option4| oradio1 oradio2 oradio3
The problem comes from my radio buttons, I've tried to change their name / values / ng-model change values for ng-values and I can't find a way to make it work.
Either I have all my radio buttons changing at the same time or only on radio button line working at a time or all object having the radio value being updated...
I have an idea of what's going on, my scope is updating everything because my ng-model is the same or values are the same but I can't find a way to make it work...
I have spend my day on it... so it's time to get help :)
Here is a plunker of the code I have (I've made a lot of change like I said) but the idea is here...
http://plnkr.co/edit/jElDW1aUAv3k4cqou54y?p=preview
Thank you !
<EDIT>
The idea of option may not be very understandable just imagine you have some buttons for people
Mary
Chloe
David
etc.
The radio buttons are team bleu / red / yellow
I select the person I want in the first panel attribute them a team in the second one and display the person per team in the third one :)
I don't know if this can be helpful for you.
I've made a fiddle based on your code.
Please check this.
$scope.addPerson = function(personName){
var obj = {};
obj['name'] = personName;
$scope.peopleArr.push(obj);
$scope.personName = '';
};
Is this far from your intent?
Angular material default functionality is when user selects one item from auto-completion list remaining items are not showing.
Eg: When I click on the control it's showing like this
After one item selected it is not showing remaining list.
Here I wanna show all auto-complete items even user selects one items from the list.
Is this possible with angular material? If yes could you please help how can we achieve this.
I need output like this(Below image I edited in paint).
If we are talking about basic example from https://material.angularjs.org/latest/demo/autocomplete, just try:
md-items="item in ctrl.states"
instead of
md-items="item in ctrl.querySearch(ctrl.searchText)"
because of controller filter the initial list in
results = query ? self.states.filter( createFilterFor(query) ) : self.states
I have a collection of contacts and I generate an ion-item for each contact using collection-repeat. Each ion-item has a span, a paragraph and a checkbox element within it. I chose to use collection-repeat over ng-repeat because it increases performance.
I understand that collection-repeat only renders the items that can fit the screen at once and renders more as we scroll.
The problem I have is that when I click a checkbox within an item, for example, the first one, and scroll down to see more lists, another checkbox within an item lower in the list would also be checked automatically. This is not the intended behaviour as I want users to be able to check a checkbox for every item.
These pictures will make the explanation clearer:
Why is my list showing this behaviour? Does it have to do with how collection-repeat works or is it a problem with my code? This is really killing me and I need to find answers. Thanks!
Ionic team is working on it right now https://github.com/driftyco/ionic/issues/1806