I have controller as follows:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.questionTypes = [
{display: 'Text', 'name': 'text'},
{display: 'Paragraph', 'name': 'textarea'},
{display: 'Multiple Choice', 'name': 'radio'},
];
$scope.top = {
heading: '',
questions: [
{
tite: 'title 1',
choices: ['']
}
]
};
});
And an HTML body as follows:
<body ng-controller="MainCtrl">
<input ng-model="top.heading" placeholder="heading"/>
<br/>
<div ng-repeat="question in top.questions track by $index">
<select ng-model="question.type" ng-options="c.name as c.display for c in questionTypes"></select>
<div ng-if="question.type == 'radio'">
<div ng-repeat="option in question.choices track by $index">
<input type="text" ng-model="option"/>
<button ng-click="question.choices.push('')" ng-disabled="$index < question.choices.length - 1">Add</button>
<button ng-click="question.choices.splice($index, 1)" ng-disabled="question.choices.length == 1">Del</button>
</div>
</div>
</div>
<pre>{{top | json}}</pre>
</body>
When the user makes the Multiple Choice selection, I want to show a fragment that provides the ability to add various choices. The choices are displayed in repeater.
That all works, but data binding on nested repeater is not working. I assuming this has something to do with scoping, but I can't figure it out.
Any help would be appreciated.
I have created a plunkr at http://plnkr.co/edit/6FxY44HgddRjrLOHlQGF
After fumbling around with this for a while, this is what I did to fix the problem.
I changed:
<input type="text" ng-model="option"/> //after changing model to ng-model
To
<input type="text" ng-model="question.choices[$index]"/>
This allowed the input to reference the parent question object and the choices array on the object instead of referencing the option reference within ng-repeat.
Related
Well, I am using KendoJS grid and I have this code here in my .js file:
var viewModel = kendo.observable({
people: new kendo.data.DataSource(...),
isActive:true,
friends: new kendo.data.DataSource(...),
selectionChanged: function(){...
}
});
$(document).ready(function () {
kendo.bind($("#sampleGridContainer"), viewModel);
});
In my .html file, I have a kendo grid:
<div id="sampleGridContainer">
<div data-role="grid"
data-columns="[...]"
data-editable="{ 'mode': 'popup', 'template': kendo.template($('#sampleTemplate').html()) }"
data-bind="source: people"></div>
</div>
<script id="sampleTemplate" type="text/x-kendo-template">
<form id="sampleForm">
...
<div data-container-for="somedropdown" class="k-edit-field">
<input name="somedropdown" id="somedropdown"
data-role="dropdownlist"
data-type="text"
data-text-field="name"
data-value-field="value"
data-bind="value: someValue, visible: isActive, source: friends, click: selectionChanged" />
</div>
...
</form>
</script>
Now, in my dropdown input element, someValue, isActive and friends variables are properly working - infact the drop down list shows up fine. But the problem is click event selectionChanged is not called. If I remove this from template, the event starts working, but my question is when all the other variables on the same scope are accessible in template, why does event selectionChanged not get called?
Any help is highly appreciated.
I have also encountered this problem, my workaround for this is that I initialize my kendoDropDownList on the edit event of grid.
edit: function (e){
e.container.find("input[name='somedropdown']").kendoDropDownList({
dataTextField: "name",
dataValueField: "value",
data-bind="value: viewModel.someValue, visible: viewModel.isActive, source: viewModel.friends, click: viewModel.selectionChanged"
});
}
Then the html would look something like this:
<div data-role="grid"
data-columns="[...]"
data-editable="{ 'mode': 'popup', 'template': kendo.template($('#sampleTemplate').html()) }"
data-bind="source: people, events: { edit: onEdit }">
</div>
<script id="sampleTemplate" type="text/x-kendo-template">
<form id="sampleForm">
<div data-container-for="somedropdown" class="k-edit-field">
<input name="somedropdown"/>
</div>
</form>
</script>
Hope this works for you.
I am using vuejs v.2, In my data structure I have products and keywords
they have many-to-many relationship. To attach keywords to product I have list of keyword's checkbox and when user submit only checked keyword should be attach to product
<div class="col-md-6" v-for="keyword in keywords">
<div class="checkbox">
<label>
<input type="checkbox" />
{{ keyword.name }}
</label>
</div>
</div>
Here I can not bind keyword.id as value (v-bind:value).
I just want to submit checked keyword ids to server
Please show me the correct way
I think the mistake you might be doing is not using v-model with an array data variable, following is working code:
vue component:
var demo = new Vue({
el: '#demo',
data: function(){
return {
keywords: [
{name: 'key1', id: 1 },
{name: 'key2', id: 2 },
{name: 'key3', id: 3 }
],
checked: []
};
}
})
and in HTML:
<div id="demo">
<div class="checkbox">
<label v-for="keyword in keywords">
<input type="checkbox" :id="keyword.name" v-bind:value="keyword.id" v-model="checked"/>
{{ keyword.name }}
<br>
</label>
<br>
checked value: {{checked}}
</div>
</div>
Working fiddle here
I been trying to click on a link with class "selectable" without success.
The html code is as display below:
<div class="form-group">
<label for="txtEmail">Email</label>
<label class="selectable col-xs-offset-2">
<input type="checkbox" id="chkNoEmail" data-bind="checked: noEmail, attr: { 'disabled': baseController.readonly() }">
</label>
<a class="selectable" data-toggle="popover" data-bind="click: baseController.noEmailClicked, popover: { title: '', customClass: 'popover-lrg popover-alert', contentHtmlId: 'noEmailAlert', onlyIf: function () { return noEmail() } }" data-original-title="" title="">no email</a>
<input type="text" class="form-control" id="txtEmail" placeholder="Email" data-bind="value: email, attr: { 'disabled': noEmail() || baseController.readonly() }"><span class="validationMessage" style="display: none;"></span>
</div>
I have try using the parent div and also using
browser.selectable(:text, /no email/).click
and
browser.selectable(:text, /no email/).fire_event("onclick") but not success.
I would try something like this.
#browser.div(:class => "forum-group").label(:class => "selectable").check
However, I am not sure you can do a ".check" on a label element. You could also try
#browser.div(:class => "forum-group").checkbox(:id => "chkNoEmail").check
Or, since I dont think it is an actual check box, you could try ".click" instead of ".check" on either one of them, I still do not think you can do either action on a label element though.
I have a div and inside of this, there are a lot of spans as follows:
<div id="mydiv">
<span id="first_id" itemindex="0">first span</span>
<span id="second_id" itemindex="1">second span</span>
<span id="third_id" itemindex="2">third span</span>
...
</div>
I want to define the function "getItemIndexValues()" in JQuery who get all values in "myDiv". It is possible?
You want to be using data- prefixed attributes.
HTML:
<div id="mydiv">
<span id="first_id" data-itemindex="0">first span</span>
<span id="second_id" data-itemindex="1">second span</span>
<span id="third_id" data-itemindex="2">third span</span>
</div>
JavaScript:
var arr = $( 'span', '#mydiv' ).map( function () {
return $( this ).data( 'itemindex' );
}).get();
Here, arr will be [ '0', '1', '2' ]
Live demo: http://jsfiddle.net/fQJAk/
Btw, if you prefer an array of numbers, do this:
return +$( this ).data( 'itemindex' );
-------^
I didn't verified it but I think this should work:
$("#mydiv>span").each(function(a,b){
alert($(b).attr('itemindex'));
});
By using the child selector here: http://api.jquery.com/child-selector/
can we use google AJAX Language API with EXTjs?????
i have tried example for translitration i have one html file
and typemarathi.js
google.load("elements", "1", { packages: "transliteration" });
function onLoad() {
var options = {
sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage: [google.elements.transliteration.LanguageCode.MARATHI],
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
// Create an instance on TransliterationControl with the required
// options.
var control = new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the editable DIV with id
// 'transliterateDiv'.
control.makeTransliteratable([myname]);
}
google.setOnLoadCallback(onLoad);
it works fine.
but if i write the textfield in extjs
Ext.onReady(function(){
var form1=new Ext.FormPanel({
renderTo:document.body,
frame:true,
title:'My First Form',
widyh:250,
items:[{ xtype:'textfield', fieldLabel:'First name', name:'firstname'}]
});
});
and try to pass firstname (name attribute to control.makeTransliteratable([firstname])) then it does not work... it says invalid id error
but if i pass->(html textfiled name to it) control.makeTransliteratable([myname]) it works fine
(i want to type and display multiple nonEnglish languages data
programatically frontend i used EXTjs is there any another way to do so if yes the suggest me. pls..
Yes you can.
Besides someone should clean his code, thats hurrible.
Yes, you can. But you should know that ExtJs automatically generates identifiers for html elements:
html:
<div class="x-form-item x-form-label-left x-box-item" id="ext-gen27" style="left: 0px; top: 0px;">
<label style="width: 55px;" class="x-form-item-label" id="ext-gen28">Send To:</label>
<div style="padding-left: 60px; width: 668px;" class="x-form-element" id="ext-gen26">
<div class="x-form-field-wrap x-form-field-trigger-wrap x-trigger-wrap-focus" id="ext-gen24" style="width: 668px;">
<input type="text" name="to" id="ext-comp-1002" autocomplete="off" size="24" class=" x-form-text x-form-field x-form-focus" style="width: 651px;">
</div>
</div>
</div>
js:
....
items: [{
xtype: 'combo',
store: ['test#example.com', 'someone-else#example.com' ],
plugins: [ Ext.ux.FieldReplicator, Ext.ux.FieldLabeler ],
fieldLabel: 'Send To',
name: 'to'
}]
As I understand you need to translate the label. In order to do this you should get the id of the label. To do this you can use TextField's label property (myField.label.id). If you want to translate a lot of elements then probably it'll be better for you to use something like this:
var control = new google.elements.transliteration.TransliterationControl(options);
var labelIds = [];
Ext.each(Ext.select('label'), function(item){
labelIds.push(item.id);
});
control.makeTransliteratable(labelIds);
But be aware that you should call this only after rendering all elements. Also you can write a some plugin that will inject this functionality into 'render' method. Writing a plugin is a better but a bit more harder way.