i have a dynamic form that is generated from a json
and my ngRepeat looks like this:
<div ng-repeat="(q, w) in user.education">
<div class="form-group">
<label for="{{q}}">{{q}}</label>
<input type="text" class="form-control" name="{{q}}" ng-model="user.education.{{q}}">
</div>
</div>
so the problem is that the {{q}} in the ng-model isnt showing the data... but in the label and input name it is working...any ideas why? because i will need to continue using these variables..i know that the brackets are not neccesary because of the ng. but whenb i loose the brackets...then the 'q' character is shown..
I believe you can just change this:
ng-model="user.education.{{q}}"
to this:
ng-model="user.education[q]"
So referencing your variable q property in the user.education object via bracket notation rather than dot notation.
Related
I have a value i want to save to the database as a slug generated from the name. The problem is I cannot use both v-model and :value in the same input field. what is the solution to this? I am using laravel and vuejs. How can i solve this error?
<div class="modal-body">
<div class="form-group">
<label>Slug</label>
<input v-model="form.slug" :value="form.name | slugify" type="text" name="slug"
placeholder="downtown-dubai"
class="form-control" :class="{ 'is-invalid': form.errors.has('slug') }">
<has-error :form="form" field="slug"></has-error>
</div>
</div>
Just generate slug from the name on the backend.
From the Frontend, you only send name and other needed fields, while on the backend you use that name to create a slug.
The easiest and most direct way would by to use v-model="form.name" and get rid of the :value attribute, then just update form.slug using the data from form.name in the function that submits the form. Example:
submitForm() {
this.form.slug = this.$options.filters.slugify(this.form.name)
// Submit the form...
},
If the form.slug field is actually displayed on the page and needs to immediately be reactive, you could also update it using a watcher for form.name like this.
watch: {
'form.name'() {
this.form.slug = this.$options.filters.slugify(this.form.name)
},
},
Is there any option to access input in code like this:
(...)
<div class="dialogProp">
<div class="gwt-Label">Name</div>
<div class="floatLeft">
<div>
<input type="text" class="textBox">
</div>
<div class="notVisible"></div>
</div>
<div class="dialogProp">
<div class="gwt-Label">Surname</div>
<div class="floatLeft">
<div>
<input type="text" class="textBox">
</div>
<div class="notVisible"></div>
</div>
(...)
As you can see I got two inputs and only difference between them is label inside of div with different text inside. This kind of pattern can be found all around of website and I cannot change this. I can not add id's as well.
Do you know if there is possibility to add to the xPath this different text inside of div's?
Let's say I would like to access first input.
Of course I could use some ass long xPath, but I would like to reuse this with text inside of gwt-Label as variable.
Use below to locate input by label text:
//div[#class="gwt-Label" and .="Name"]/following-sibling::div//input
In Python you can pass label from variable:
label = "Name"
xpath = '//div[#class="gwt-Label" and .="%s"]/following-sibling::div//input' % label
To access the input with respect to the label text you can use the following solution:
labelText = "Name"
#or labelText = "Surname"
xpath = "//div[#class='gwt-Label' and contains(.,'" +labelText+ "')]//following::div[1]//input"
I have a list of similar looking DIVs without any Div ID, except one has a check box checked and others doesn't. What i need is to find the value from a child tag only if a radio button is selected.
Below is a simpler version of my code.
<div class = "XYZ">
<input type="radio" checked>
<input type="hidden" value="This is a great thing 1">
</div>
<div class = "XYZ">
<input type="radio">
<input type="hidden" value="This is a great thing 2">
</div>
Result needed is
This is a great thing 1
Unfortunately the source code cannot be changed.
Your xpath should look for a div that contains the checked input and to get the value for the one that has value attribute.
First selector returns the input, the second returns the value.
//div[.//input[#checked]]/input[#value]
//div[.//input[#checked]]/input/#value
As an alternative you can use the following sibling:
//input[#checked]/following-sibling::input
If you want to also use the class of the parent div:
//div[#class='XYZ']/input[#checked]/following-sibling::input
I have a input wrapper, (input-wrapper.blade.php)
<div class="form-group">
#yield('input')
</div>
Called via:
#include('input.checkbox')
The checkbox file looks like:
#extends('input-wrapper')
#section('input')
<input type="checkbox" value="1">
#endsection
The issue I am having is when I call this with multiple inputs (I have one for different input types):
#include('input.checkbox')
#include('input.textarea')
....
I just get a rendering of the first item (checkbox) multiple times. i'm hoping to render each type of input.
<input type="text" ng-repeat="board in allBoards track by $index" ng-model="board">
✔
What I am trying to do is modifying board name with UpdateBoards(). But I click the button, values of the input are not passed to UpdateBoards, what should I change? Thanks
So for I understand your problem try following:
<div ng-repeat="board in allBoards track by $index">
<input type="text" ng-model="board">
✔
</div>
By wrapping ng-repeat in div and calling each input and a href tag inside div, hope it will help you.