I want to set a input text field of formular from JSON object, which is value of select option. I have a data in AngularJS controller, after selecting combobox, data is changed, but text field doesn't be filled.
https://github.com/lijunwu001/jstree_with_select.git
Here is demo link on github.
In general it's wrong approach. To see your error you can change your code from
<div ng-repeat='node in vm.selected'>
ID: <input type='text' ng-attr-value='{{ node["id"] }}' />
Description: <input type='text' ng-attr-value='{{ node["text"] }}' size='35'/><br />
</div>
To:
<div ng-repeat='node in vm.selected track by $index'>
Just symbol: <input type='text' ng-attr-value='{{ node }}' />
</div>
It looks strange, doesn't it? It's because you cant bind object to "select" like
<select ng-model='vm.selected' required>
After your click on "select" option your value of vm.selected is just string, but not an object. And you are doing ng-repeat with symbols of this string.
You could use the ng-change directive
Related
I have multiple set off field name and I want to display all those in single textbox using ng-model. But I am able to display only single field name.
This is my code : <p> {{cts.selectedcontact.location.state + " "cts.selectedcontact.location.postcode}} </p>
<input type="text" ng-model="cts.selectedcontact.location.state"+`"cts.selectedcontact.location.postcode"> <br/>`
try this
angular.module("app",[]).controller("appContr",function($scope)
{
$scope.newmodelName="";
$scope.Sample1="ram";
$scope.Sample2="esh";
$scope.Concstring=function(val1,val2)
{
return val1+val2;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="appContr">
<input type="text" ng-init="newModelName =Concstring(Sample1,Sample2)" ng-model="newModelName">
<br />
</div>
well ng-model shall have only one argument, that will be binded to the field value and it will receive the value of the input field every time it is changed. So you can not use several variables in one ng-model.
But if you would like to show it as a default value, then you can set it in the value argument in html, or just in your js file. like so:
<input type="text" ng-model="modelValue"> <br/>
and in .js file:
$scope.modelValue = $scope.cts.selectedcontact.location.state + $scope.cts.selectedcontact.location.postcode;
You can initialize new variable for text box like as
<div ng-init="newField = cts.selectedcontact.location.state + cts.selectedcontact.location.postcode">
<input type="text" ng-model="newField"> <br/>
</div>
I am generating a dynamically text boxes using angularjs. I set a array in controller and repeating in view with ng-repeat. Here is controller code :-
this.total_options = [
{text : 'form.options.Option1' , placeholder: 'Enter Option Here'},
{text: 'form.options.Option2', placeholder: 'Enter Option Here' }
];
Now in view i am repeating this options like :-
<li data-ng-repeat="option in mcssController.total_options">
<input required="required" type="text" ng-model="option.text" class="option" placeholder="{{option.placeholder}}" />
</li>
But when page is rendered the textbox showing ng-model property 'form.options.optoin1' instead of placeholder('Enter Option Here'). How can i solve this problem ?
See if you clear out the form, you should be able to see the placeholder!
Try:
<li data-ng-repeat="option in mcssController.total_options">
<input required="required" type="text" ng-init="model=$eval(option.text)" ng-model="model" class="option" placeholder="{{option.placeholder}}" />
</li>
You want ngModel to bind to a model, not a property that represents a string. Since you want to interpret the string as a model, you can use $scope.$eval. It should work if you use $scope.$eval in an ngInit expression, and then use result to bind to ngModel.
I have an array of objects that I bind to the scope. My view then accesses the objects via ng-options like this:
<div class="tile block box-shadow">
<form role="form">
<div class="form-group">
<label>Reason for change</label>
<select class="form-control" ng-options="item.value as item.description for item in controller.priceChangeReasons" />
</div>
</form>
</div>
but the dropdown has nothing when you select it.
I have logged the priceChangeReasons and can see that the array is working and returning values.
I have made a codepen to show the issue:
http://codepen.io/r3plica/pen/XbQzMa?editors=101
I realise this is probably a syntax error on my part, but I can't see it.
Can someone help?
ngOptions directive requires ngModel, just add:
<select class="form-control" ng-options="item.value as item.description for item in controller.priceChangeReasons" ng-model="controller.reason" />
and all should work
Question
I was wondering what the AngularJS "best practice" way of getting a label for a field is. With jQuery you just query using a "label for" query then extract the text. While it's possible to do it this way with AngularJS, something just doesn't feel right about it.
Assume you have something like this in your HTML:
<form name="MyForm" ng-controller="Ctrl">
<label for="MyField">My spoon is too big:</label>
<input type="text" size="40" id="MyField" ng-model="myField" />
<br /><br />
You entered {{ myField }} for {{ myField.label }}
</form>
The controller internal is pretty simple:
$scope.myField = 'I am a banana.';
Basically I want to populate the myField.label in the output with "My spoon is too big."
What I'm Doing Now
All I am doing right now is executing a query that pulls the data similar to the jQuery methodology ($("label[for='MyField']")). Then, if that doesn't exist I am just pulling the placeholder text. It works, but it seems like a bit of overhead.
What I'm Trying to Accomplish
I want some custom form validation and I want to include the label in the message. I just need to pull the label text so that I can write it extremely generically and then not have to worry about people switching i18n data in dynamically later in the game.
Fiddle
Per the suggested solution:
https://jsfiddle.net/rcy63v7t/7/
You change your HTML to the following:
<label for="MyField">{{ myFieldLabel }}</label>
<input type="text" size="40" id="MyField" ng-model="myField" />
and your JS to the following:
$scope.myFieldLabel = 'My spoon is too big:';
then later, you can get/set its value just as easily:
if ($scope.myFieldLabel === 'My spoon is too big:') {
$scope.myFieldLabel = 'New label:';
}
Note that new AngularJS best practices call for always using a "dot" in a field reference. It would fit perfectly here if you did something like:
<label for="MyField">{{ myField.label }}</label>
<input type="text" size="40" id="MyField" ng-model="myField.value" />
and JS:
$scope.myField = {
value: '',
label: 'My spoon is too big:'
};
Then you can always easily access $scope.myField.label and $scope.myField.value.
Let's say in your controller you have a scope variable like
$scope.myField = {};
$scope.myField.label = "Fruit name";
and your template is like
<form name="MyForm" ng-controller="Ctrl">
<label for="MyField">{{myField.label}}</label>
<input type="text" size="40" id="MyField" ng-model="myField.value" />
<br /><br />
You entered {{ myField.label }} for {{ myField.label }}
</form>
By this field label will come dynamically. Apply custom validation in input field as per your requirement.
Hope I understand exactly what you wants.
Just put your label text in the input title and you can use a "#" directive. You can also use this to make sure the label id matches.
<label for="{{myfield_control.id}}">{{myfield_control.title}}</label>
<input type="text" size="40" id="MyField" ng-model="myField" title="My spoon is too big:" #myfield_control >
<br /><br />
You entered {{ myField }} for {{ myfield_control.title }}
myField is your ngModel. myfield_control is a reference to your input control.
I'm having trouble with a form using angularjs/php/mysql to make a quite simple CRUD.
My form pass correctly the text inputs but I can't pass the <select> value.
The ng-option expression below is wrong but I can't find how to write it.
<div ng-controller="formController">
<form ng-submit="addVinyl()" novalidate class="simple-form">
Owner: <select ng-model="vinyl.owner" ng-options="user.name for user in users"></select><br />
Title: <input type="text" ng-model="vinyl.name" /><br />
Artist: <input type="text" ng-model="vinyl.artist" /><br />
<input type="submit" value="Add Vinyl" />
</form>
</div>
gives this html:
<option value="0">hey</option>
<option value="1">hoy</option>
<option value="2">hay</option>
My php file gets the good values of the text inputs but doesn't get the '0', '1', '2' or the 'hey', 'hoy', 'hay'... I tried to display vinyl.ownerand I got {"NAME":"hey"} for the first option selected.
ng-options is not the same as ng-repeat
The correct syntax for your purpose is :
ng-options="user.name as user.name for user in users"
This is due to the fact that you need a value for the attribute value, and that you need a "display text".
find more information inside documentation :
https://docs.angularjs.org/api/ng/directive/ngOptions