Im having an issue with Anuglar. ng-bind doesnt update textarea once its value has been altered by user input.
Note: The reason im using ng-bind instead of ng-model is that I need ng-bind-html as the input is in html sanatized using ngSanitize.
Demo:
http://jsfiddle.net/Lvc0u55v/11682/
Here is how to see what im talking about: Select anyvalue from dropdown and textarea is updated. But select New Value and put some text in the textarea. Then change the select box to any value and textarea never changes again!
Code:
[SCRIPT]
$scope.msg_templates = []; //array of {id, title, msg} filled with required stuff
$scope.msg_templates[0] = {id:'0', title:'{New Value}', msg:''}; //first item is to enter new value
$scope.msg_templates[1] = {id:'1', title:'TTT', msg:'TTT'};
$scope.msg_templates[2] = {id:'2', title:'XXX', msg:'XXX'};
.
.
//set default value
$scope.msg_sel = '';
$scope.msg_field = '';
//change msg function
$scope.change_msg_sel = function()
{
if($scope.msg_sel==null){
$scope.msg_field = '';
return false;
}
$scope.msg_field = $scope.msg_sel.msg;
};
[HTML]
<select ng-model="msg_sel" ng-change="change_msg_sel()" ng-options="v.title for v in msg_templates">
<option value="">Please Select -</option>
</select>
<textarea ng-bind-html="msg_field"></textarea>
Solve the problem myself, just manually override the field's value inside $scope.change_msg_sel using the good-ol-always-working-vintage-JS!
document.getElementById('msg_field').value=$scope.msg_field;
(so much for the amazing angular!!)
Related
My form has got 2 select boxes. The second select options box is loaded when an option is selected in first box. The form is used for both adding and editing. I show the list below the form with edit button against each row. When I click on edit button it loads the values in form to edit. The thing is when I click on a row for first time it loads the values in form perfectly. If I click on another row button to edit, the SECOND select option alone does not show the selected value. But the box is loaded with values.
Code in controller:
$scope.editShift = function(row) {
for (var i = 0; i < $scope.availableShift.length; i++) {
if ($scope.availableShift[i].shiftId === row.entity.shiftId) {
$scope.shift = angular.copy($scope.availableShift[i]);
break;
};
};
$scope.selectLineNames();
};
$scope.selectLineNames = function(){
$scope.availableListOfLineNames = [];
$scope.availableListOfLineNamesTemp = LineDetails.ld_get_ln_resource.query
({plant: $scope.shift.plant}, function(response) {
angular.forEach(response, function(item) {
if (item) {
$scope.availableListOfLineNames.push(item);
}
});
});
};
Second Select Option in Form
<select name="lineName" ng-model="shift.lineName"
ng-options="x for x in availableListOfLineNames" id="selectoption2" required>
<option value="">Select One</option>
</select>
EDIT:
Calling $scope.selectLineNames(); inside $scope.editShift somehow makes the lineName value undefined after copy, on second time. Inside selectLineNames() too the value is available until it reaches the forEach() .Only after the loop starts It becomes undefined.
So used a duplicate method like $scope.selectLineNamesTemp(); and passed values from $scope.editShift and assigned them in the duplicate method like below.
$scope.selectLineNamesTemp = function(){
$scope.availableListOfLineNames = [];
$scope.availableListOfLineNamesTemp = LineDetails.ld_get_ln_resource.query(
{plant: plantTemp}, function(response) {
angular.forEach(response, function(item) {
if (item) {
$scope.availableListOfLineNames.push(item);
$scope.shift.lineName = lnTemp; // assigned from editShift
}
});
}) ;
};
Can someone point out why the value become undefined? Also is there a way to use the same old method without using the duplicate method. Hope someone help.
I have an element checkbox, that I want to reset the value of ng-model when another element is not showed, example: set to false if another element is not showed in my view. ng-show only hide my checkbox, but not reflect in object of controller.
<select ng-model="item.myOption" convert-to-boolean>
<option value="false" selected>Option false</option>
<option value="true">Option true</option>
</select>
<input type="checkbox" ng-model="item.myChecked" ng-show="item.myOption">
You can write small function on ng-change of select field, in which you can set model value of checkbox to either true or false or null.
app.controller('myCtrl', function($scope) {
$scope.item = {myOption: "true"}
$scope.myCheckbox = true;
$scope.changed = function() {
if($scope.item.myOption == "false") {
$scope.myCheckbox = false;
} else {
$scope.myCheckbox = true;
}
}
});
http://plnkr.co/edit/ekNxZImNIBisBCrfZsFS?p=preview
Similarly, you can change any dependent field's value (like finding age field value right after user selects his DOB using datepicker, etc). You can use switchcase either for large set of values instead of if else inside change function
I have a dropdownlist -
<select ng-model="contact.type" id="select_{{$index}}" ng-change="changedValue()" class="searchCriteria">
<option>Policy Number</option>
<option>Insured Name</option>
</select>
I want to get the selected item using angularjs. So far I have tried
$scope.changedValue = function () {
alert($(".searchCriteria option:selected").html());
}
among other things. But each time the alert shows "undefined". How do I get the selected option text?
You can just use the $scope variable,
$scope.changedValue = function () {
alert($scope.contact.type);
}
I want to build select list (select2) options when user clicks on html button.
My HTML:
<select id="mySel2" class="form-control" multiple="multiple">
<option ng-repeat="item in items" ng-selected="item.selected"
ng-model="item.tag">
{{item.tag}}
</option>
</select>
Angular js function code on button click:
var fruits=angular.module("myApp",[]);
fruits.controller('ctrlTags', function($scope){
/* I HAVE SET DEFAULT VALUE TO SELECT LIST*/
/* IT WORKING PERFECT WITH SHOWING SELECTED VALUES*/
var tagsData = [
{id:1,tag:'Apple'},
{id:2,tag:'Banana'},
{id:3,tag:'Cherry'},
{id:4,tag:'Cantelope'},
{id:5,tag:'Grapefruit'},
{id:6,tag:'Grapes',selected:true},
{id:7,tag:'Lemon'},
{id:8,tag:'Lime'},
{id:9,tag:'Melon',selected:true},
{id:10,tag:'Orange'},
{id:11,tag:'Strawberry'},
{id:11,tag:'Watermelon'}
];
$scope.items = tagsData;
/*NOW ON BUTTON CLICK GETKEY() FUNCTION WILL BE CALLED*/
/* AND I WANT TO RENDER/REFRESH SELECT LIST WITH NEW DATA */
$scope.getKey=function(data){
var newData = [
{id:4,tag:'car'},
{id:5,tag:'bat',selected:true},
{id:6,tag:'cat',selected:true},
{id:7,tag:'Lemon'},
{id:8,tag:'Lime'},
];
$scope.items=newData;
};
});
ISSUE:ON BUTTON CLICK IT IS UPDATING SELECT LIST VALUES BUT NOT SHOWING DEFAULT SELECTED VALUES
PLEASE TELL ME HOW TO REFRESH SELECTED VALUE AS WELL.
Use select2 (form-widgets.js)
$('[name="NAME"]').select2({placeholder: ''}).val(VAL).change();
You need to add model into select section ng-model="selected".
You can add for example first index
in controller $scope.selected = tagsData[0]
I'm using angular-ui's select2 for a fairly simple dropdown. It's backed by a static array of data sitting on my controller's scope. In my controller I have a function that gets called on ng-change of the dropdown so that I can perform some actions when the value changes.
However, what I'm finding is that the ng-model's property gets set as a JSON string rather than an actual javascript object, which makes it impossible to use dot notation to grab properties off of that model.
Here's the function that handles the value of the dropdown getting changed:
$scope.roleTypeChanged = function() {
//fine:
console.log('selectedType is: ', $scope.adminModel.selectedType);
// this ends up being undefined because $scope.adminModel.selectedType is a
// JSON string, rather than a js object:
console.log('selectedType.typeCode is: ', $scope.adminModel.selectedType.typeCode);
}
Here's a plunker of my full example: http://plnkr.co/edit/G39iZC4f7QH05VctY8zG
I've never seen a property that's bound to ng-model do this before, however I'm also fairly new to Angular so it's likely that I'm just doing something wrong here. I can certainly do something like $.parseJSON() to convert the JSON string back to an object, but I'd rather not unless I have to.
Thanks for any help!
You need to use ng-options on your select if you want to have object values. Actually creating the options yourself using an ng-repeat will only allow you to have string values for the various options:
<select ui-select2
ng-model="adminModel.selectedType"
ng-change="roleTypeChanged()"
data-placeholder="Select Role Type" ng-options="type.displayName for type in adminModel.roleTypes">
<option value=""></option>
</select>
http://plnkr.co/edit/UydBai3Iy9GQg6KphhN5?p=preview
Thanks Karl!
I have struggled a day with this
as a note for others having similar problems as I did,
when using an ng-model not accessible and defined in the controller/directive I solved it like this.
//country.Model has Code and Name nodes
* HTML *
<select
name="country" data-ng-model="country.Model"
data-ui-select2=""
data-ng-change="countryChanged(country.Model)" <!--only for test, log to console-->
data-ng-options="country as CodeAndName(country) for country in countries"
data-placeholder="{{placeholderText(country.Model, '- - Select Country - -')}}" >
<option value=""></option>
</select>
* JS *
function controller($scope, $q, $location, $routeParams) {
$scope.countryChanged = function(item) { // for test
console.log('selectedType is: ', item);
};
//returns the item or the text if no item is selected
$scope.placeholderText = function (item, text){
if (item == undefined)
return text;
return $scope.CodeAndName(item);
};
// returns a string for code and name of the item, used to set the placeholder text
$scope.CodeAndName = function (item) {
if (item == undefined)
return '';
return item.Code + ' - ' + item.Name;
};