ng-option not selecting model value on first call - javascript

I have multiple drop downs with different data arrays. On Edit click, I want to set the selected value. I have set ng-model to be the object but its not working.
<div class="form-group">
<label class="control-label">Category{{product.categoryDto}}</label>
<select ng-model="product.categoryDto" class="form-control" ng-options="a.categoryName for a in categories"></select>
</div>
Following is the edit code.
<button type="button" ng-click="editProduct(row)" class="btn btn-sm btn-primary">
<i class="glyphicon glyphicon-pencil"></i>
</button>
$scope.editProduct = function(row){
console.log($scope.product.categoryDto);
$scope.product = row;
$scope.showAddProductForm = true;
$scope.product.categoryDto = row.categoryDto;
};
In label categoryDto is showing correct values but not selecting the option. Any idea?

Related

Using ng-model to insert data into arrays

I'm rendering the contents of an array using ng-repeat like this-
<tr ng-repeat="option in eventCtrl.questionDetail.options track by $index">
<th scope="row">Option {{$index + 1}}</th>
<td>
<input type="text" ng-model="option" ng-change="eventCtrl.newlyAddedOptions[$index] = option" style="width:100%;">
</td>
<td>
<button type="button" ng-confirm-click="Are you sure to delete?" confirmed-click="eventCtrl.removeOption($index)" class="btn btn-light btn-sm">Delete</button>
</td>
</tr>
<button type="button" class="btn btn-dark" ng-click="eventCtrl.addOption()" id="addNewOption">+ Add New Answer Option</button>
On click of the button I'm insering an empty string into the questionDetail.options array so that I get an empty input field to insert my data.Controller functions looks like this-
myApp.controller('eventController',function(){
let dash=this;
dash.newOption ='';
//store all newoptions to this array before finally updating the
//question
dash.newlyAddedOptions = [];
dash.addOption = () =>{
dash.questionDetail.options.push(dash.newOption);
});
//add new options
dash.updateTheQuestion = () =>{
//add the newly added options in the questionDetail if any which will be finally updated
apiService.updatequestion(dash.params.qid,dash.questionDetail).then(function successCallBack(response) {
$rootScope.$broadcast("loader_hide");
alert(response.data.message);
});
}
Now when I insert data into the field and try to add another option the previously inserted field becomes blank beacuse the questionDetail.options array get rerendered again.However I've used ng-change to collect data and store it into the newlyAddedOptions array.
How do I change the empty strings pushed into array with the value that is retrieved with ng-model="option" so that I could directly push those into questionDetal.options array.
I know this good be done easily and I'm missing something.
Thank You in advance.
Edit:I was pushing an empty string because I wanted a blank input on clicking the add option where I can insert new option.This is mainly the edit question view where user can add an option or delete an option with the options that are coming from the database.
Plunkr-https://plnkr.co/edit/SLfy8qaz8LoHurwpVmw6?p=catalogue
Try this :
<tr ng-repeat="opt in eventCtrl.questionDetail.options track by $index">
<th scope="row">Option {{$index + 1}}</th>
<td>
<input type="text" ng-model="newlyAddedOptions[$index]" style="width:100%;">
</td>
<td>
<button type="button" ng-confirm-click="Are you sure to delete?" confirmed-click="eventCtrl.removeOption($index)" class="btn btn-light btn-sm">Delete</button>
</td>
</tr>
<button type="button" class="btn btn-dark" ng-click="eventCtrl.addOption()" id="addNewOption">+ Add New Answer Option</button>
https://codepen.io/supravi96/pen/bMmpOQ?editors=1010

Laravel - select2 | reset select values upon form reset

I have an update form and I am using select2 and blade to fill in previous records in select2:
<div class="col-7 m-input--solid">
<select class="form-control m-select2 m-input--solid" id="m_select2_3" name="collegeCourses[]" multiple>
//for each of course categories
#foreach($courseCategories as $courseCategory)
//set optlabel
<optgroup label="{{$courseCategory}}">
//for each of courses in a courseCategory
#foreach($courseNames->$courseCategory as $courseName)
// set value and text and conditionally set "selected" attribute if the college already has those courses.
<option value="{{$courseName}}" {{((in_array($courseName, $college->courses())) ? 'selected="selected"' : '')}}>
{{$courseName}}
</option>
#endforeach
</optgroup>
#endforeach
</select>
</div>
<button type="Submit" class="btn btn-accent m-btn m-btn--air m-btn--custom">
Save changes
</button>
<button type="reset" class="btn btn-secondary m-btn m-btn--air m-btn--custom">
Cancel
</button>
I observe that clicking reset does not reselt the select2 values to the default "selected" values.
Edit:
This is an update form for an already existing record, I am setting the original ( which are stored with record) as selected by default. I want to be able to set these selected option to be restored upon clicking reset.
what is going wrong here?
reset select2 value using jQuery button click event
<button type="reset" id="reset-btn" class="btn btn-secondary m-btn m-btn--air m-btn--custom">
$( "#reset-btn" ).click(function() {
$('#m_select2_3').val('').change();
//setting specific value in select2
$('#m_select2_3').val('1').change();
});

Simple Angular radio buttons not working... seem broken?

This works:
<h4>Radio & Uncheckable Radio</h4>
<pre>{{radioModel || 'null'}}</pre>
<div class="btn-group">
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</label>
</div>
This doesn't work
{{radioModel || 'null'}}
<div class="btn-group">
<label class="btn btn-primary" data-ng-repeat="store in global.user.store" ng-model="radioModel" btn-radio="{{store}}" uncheckable>{{store}}</label><br>
</div>
If you select one radio button, the other radiobuttons don't de-select. Instead of having one radio button checked at a time, all 3 can be checked! And the {{radioModel}} won't display any value. For the first example, {{radioModel}} would display 'Left,' 'Right,' or 'Middle' depending on the value of btn-radio.
It's like data-ng-repeat="store in global.user.store" breaks the button behavior!
Try setting the scope variable with a dot, like if it an object.
$scope.radio = {model: null}; //for example
And use always radio.model instead of radioModel.
This is because the way the scope inheritance works each ng-model of the ng-repeat will generate a new scope. With the 'dot' rule you want have this problem.
Here is more information https://github.com/angular/angular.js/wiki/Understanding-Scopes
Try removing the {{}} in the btn-radio attribute :
<label class="btn btn-primary" data-ng-repeat="store in global.user.store" ng-model="radioModel" btn-radio="store" uncheckable>{{store}}</label>

Displaying the selected value in JavaScript

i am using bootstrap btngroup to select one value ..how can i display that selected value ?? here is my code.
<div class="input-group">
<div id="radioBtn" class="btn-group">
<a class="btn btn-primary btn-sm active" data-toggle="fun" data- title="Y">YES</a>
<a class="btn btn-primary btn-sm notActive" data-toggle="fun" data-title="X">I don't know</a>
<a class="btn btn-primary btn-sm notActive" data-toggle="fun" data-title="N">NO</a>
</div>
<input type="hidden" name="fun" id="fun">
</div>
and JS
$('#radioBtn a').on('click', function(){
var sel = $(this).data('title');
var tog = $(this).data('toggle');
$('#'+tog).prop('value', sel);
$('a[data-toggle="'+tog+'"]').not('[data- title="'+sel+'"]').removeClass('active').addClass('notActive');
$('a[data-toggle="'+tog+'"][data-title="'+sel+'"]').removeClass('notActive').addClass('active');
})
Tidy your code - remove the spaces in your data- title attribute, in both the HTML and JS, as these are causing it to break.
Add a <div id="display"></div> in your HTML somewhere and style it how you like.
Add this line to your JS click handler: $('#display').html(sel);
Here's a demo.
If you'd prefer the result to be the text of the radio button instead of the value, use $('#display').html($(this).html()); instead in step 3.
Done.
Not sure if this is what you mean, but to get the value (or text) from a clicked button in a button group, I use for example.....
HTML
<div id="aBtnGroup" class="btn-group">
<button type="button" value="L" class="btn btn-default">Left</button>
<button type="button" value="M" class="btn btn-default">Middle</button>
<button type="button" value="R" class="btn btn-default">Right</button>
</div>
<p>
<div>Selected Val: <span id="selectedVal"></span></div>
JS
$(document).ready(function() {
// Get click event, assign button to var, and get values from that var
$('#aBtnGroup button').on('click', function() {
var thisBtn = $(this);
thisBtn.addClass('active').siblings().removeClass('active');
var btnText = thisBtn.text();
var btnValue = thisBtn.val();
console.log(btnText + ' - ' + btnValue);
$('#selectedVal').text(btnValue);
});
// You can use this to set default value upon document load
// It will fire above click event which will do the updates for you
$('#aBtnGroup button[value="M"]').click();
});
CONSOLE OUTPUT
Left - L
Middle - M
Right - R
Hope this helps
Plunker here

AngularJS: How to change radio button view when model changes?

Consider the HTML as
<div class="btn-group col-lg-3" data-toggle="buttons" data-ng-model="transaction.debit" required>
<label class="btn btn-default" data-ng-click="setDebitTransaction('true')">
<input type="radio">Debit
</label>
<label class="btn btn-default" data-ng-click="setDebitTransaction('false')">
<input type="radio">Credit
</label>
<div>
and my Controller looks like
$scope.transaction = {};
$scope.setDebitTransaction = function(value) {
$scope.transaction.debit = value;
console.log('Debit = ', $scope.transaction.debit);
};
What I want?
- When I click on radio button I see that the $scope.transaction.debit is correctly set and that the corresponding radio button is enabled
- But when my model changes its value from backend processing, I see that $scope.transaction.debit is correctly set but corresponding radio element is not enabled
Question
- How can I enable the radio button based on value in $scope.transaction.debit?
DEMO
I have put this on plunker
I assume what you are trying to do is get the appropriate button in the btn-group to change its state to "active" (bootstrap style class). To do this, there are probably a million ways, here is one:
Use the ng-class directive in angular, to inject a class to the btn div, based on some $scope attribute (in your case $scope.transaction.debit).
Here is how that might look in code:
<label class="btn btn-default" ng-class="{'active': transaction.debit}" data-ng-click="setDebitTransaction('true')">
<input type="radio">Debit
</label>
<label class="btn btn-default" ng-class="{'active': !transaction.debit}" data-ng-click="setDebitTransaction('false')">
<input type="radio">Credit
</label>
Updated plunker.
Set the active class via ng-class on your labels like so:
<label class="btn btn-default" ng-class="{active: transaction.debit}" data-ng-click="setDebitTransaction('true')">
<input type="radio">Debit
</label>
<label class="btn btn-default" ng-class="{active: !transaction.debit}" data-ng-click="setDebitTransaction('false')">
<input type="radio">Credit
</label>
Plunker here: http://plnkr.co/edit/tUzF4J9ixEnKxLNdI1Bm

Categories