i want to create a form dynamically from a json string that is coming from a database. I am new to angularjs and I would like to know how to create a dropdown control dynamically within a repeater. Below is an example of my code
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.fields = [
{"reference_id":209,"form_id":1,"name":"firstname","label":"First Name","type":"text"},
{"reference_id":210,"form_id":1,"name":"lastname","label":"Last Name","type":"text"},
{"reference_id":211,"form_id":1,"name":"email","label":"Email","type":"text"},
{"reference_id":212,"form_id":1,"name":"picture","label":"Picture","type":"file"},
{"reference_id":213,"form_id":1,"name":"address","label":"Address","type":"file"},
{"reference_id":214,"form_id":1,"name":"select","label":"values","select ng-model":"select"}, ];
As was mentioned in a comment, you'll want to use ngOptions.
Plunk example
You'll want to structure your html similar to this:
<select ng-model="currentField" ng-options="field.reference_id as field.label for field in fields"></select>
currentField will always result in a reference_id being selected. You can change it to name or any of the other properties of $scope.fields.
Related
I have a simple angular snippet
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>My name is {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
$scope.age = "26";
$scope.height = "5.9";
$scope.gender = "M";
});
</script>
As you can see I have 4 variables declared in my myCtrl controller
$scope.name = "John Doe";
$scope.age = "26";
$scope.height = "5.9";
$scope.gender = "M";
Is there a way to programmatically list of all the declared $scope variables of a specific angular controller?
Why am I trying to do this ?
Sometimes, when you’re deep in 1000 lines of code in an angular controller, it will be very helpful to know what are the available variables to use at that specific moment. First, the benefit would be, so we don’t re-declare something that already been declared, and second, so we don't override an existing variable unintentionally. For those 2 reasons alone, that's why I am trying to list all the available $scope variables, especially the one that I declared in on that specific page, or in a specific controller of Angular.
NOTE : I am NOT looking to list all JS scope variables, but only looking for those one that I declared in Angular
I know exactly what you need and I use this lib extensively to show me my objects like Chrome does.
Angular json formatter
And the beauty is that it updates instantly with Angular magic. So you know the current state of your object at all times!
Simply drop this directive in your html and assign $scope to it.
How to set the Combobox'value (SelectedBox) from javascript code?
Demo of the component
http://js.devexpress.com/Demos/WidgetsGallery/#demo/editors-select_box-search_and_editing/angular/generic/light.compact
I need to set the value from javascript code, I use AngularJS!
from component's api I didn't see how to set it!
http://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxSelectBox/?version=15_2
There is the value option in the dxSelectBox API. Well, just set this option. If you want to use a two-way binding for the selectbox value, use the bindingOptions object.
HTML
<div dx-select-box="{dataSource: data, bindingOptions: { value: 'selectedItem' } }"></div>
JS
myApp.controller("myCtrl", function($scope) {
$scope.data = [/* your data */];
$scope.selectedItem = $scope.data[0];
});
I've created the small sample here.
I need to surround a bound data value with square brackets so it will display as follows:
[somevalue]
Which I have done like so:
[<span ng-bind="person.id"></span>]
I can do this fine but I am running into an issue when I attempt to apply this to a dive which has a bound value, eg:
<div ng-bind-html="anotherValue | trustAsHtml"></div>
I want the [somevalue] to appear within the anotherValue div, but when I try the following code the second value isn't displayed:
<div ng-bind-html="anotherValue | trustAsHtml"> [<span ng-bind="person.id"></span>]</div>
I'm new to angularjs so I'm probably doing something completely stupid, my apologies if that is the case, thanks.
You can do it the way you are trying like so:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $sce) {
$scope.person = {id: 2}
$scope.anotherValue =
$sce.trustAsHtml('Hi[<span>'+$scope.person.id+'</span>]');
});
And in the markup:
<div ng-bind-html="anotherValue"></div>
ng-bind-html replaces the inner-html of an element. So in this case the anotherValue would overwrite the person.id. If you move the inner span out the div it will become visible again
I wanted to set a default value to my ng-options by using ng-init, ng-model, etc. They didn't work at all. My code is following:
Angular
var app = angular.module('role', []);
app.controller('fooController', function($scope){
$scope.roles = [{id:1, name:"Administrator"}, {id:2, name: "Student"}];
$scope.user.roles = $scope.roles[0];
});
HTML
<body data-ng-app="role" data-ng-controller="fooController">
<select multiple class="form-control" data-ng-model="user.roles" data-ng-options="role.name for role in roles" required=""></select>
</body>
Here is my Plunkr.
Any help would be appreciated.
Update:
If you want to get directly to the reference used in this answer, here it is:
Reference:
Initial Selection In AngularJS ng-options with track by
Here's what worked for me:
app.controller('fooController', function($scope){
$scope.roles = [{id:1, name:"Administrator"}, {id:2, name: "Student"}];
$scope.user = {};
$scope.user.roles = [ $scope.roles[0] ];
});
There was an error in the plunk that user wasn't initialized, apart from this, Angular would compare every object in the ng-options array to every element in the ng-model array. JavaScript comparison not Angular comparison, comparing 2 objects even with same properties in JavaScript returns false (different objects).
Plunk: http://plnkr.co/edit/ccsAVvPACnN6Qzje7HcB?p=preview
.
Now, this is not ideal. Typically you want to correlate these based on ID or so, here's another way:
In HTML, use track by to tell AngularJS to compare IDs instead of entire objects:
<select multiple class="form-control"
data-ng-model="user.roles"
data-ng-options="role.name for role in roles track by role.id"
required=""></select>
Then in your controller, you can use any object without actually being in the array:
app.controller('fooController', function($scope){
$scope.roles = [{id:1, name:"Administrator"}, {id:2, name: "Student"}];
$scope.user = {};
$scope.user.roles = [ {id:1, name:"Administrator"} ];
});
Plunk: http://plnkr.co/edit/NKLXrwqwk36YfhBSXILN?p=preview
Note that I didn't even need the name property. It's just for making a proper object later, but it really isn't needed for matching now, try without it!
.
I wrote a detailed tutorial with an accompanying video on this initial selection problem and its variations. It's focused on single-select but multi-select is just using an array of objects instead of one object directly.
Check it out for more understanding -- highly recommended:
Initial Selection In AngularJS ng-options with track by
.
Let me know in comments if you are still struggling with this.
if your model is like $scope.user.roles = [1]; then your ng-options should be like this,
data-ng-options="role.id as role.name for role in roles"
this will select only the ID
if you do like data-ng-options="role.name for role in roles" then your model should be like
$scope.user.roles = [{id:1, name:"Administrator"}];
because this will select the whole object
and in your controller
$scope.user = {}; //this line should be add
because your trying to access a roles property of user but there is no user object defined, this will also occur a error
here is the Updated Plunker
here is the updated plunker1 plunker2 for your case of ng-options
you can use ng-init here. please check.
like this
<body ng-init="role.name = roles[0].name" data-ng-app="role" data-ng-controller="fooController">
<select multiple class="form-control" data-ng-model="user.roles" data-ng-options="role.name for role in roles" required=""></select>
</body>
Your Plunkr has errors. You have to define $scope.user = {}; before you use it. Then it will work.
Note: This will only set an initial value to model. If you want to make Administrator highlighted by default, you'll have to figure out some other way.
I have two arrays of data which is being shown in a tree form and a relation between them.
$scope.types=['odd','prime','square','even'];
$scope.items=['1','4','3','8'];
div ng-repeat="item in items| customFilter">item
And
div ng-repeat="type in types| customFilter">type
Both are displayed in an ng-repeat and according to the selected item the other list adjusts.
eg: 1 is selected, the state becomes
$scope.type=['odd','prime','square','even'];
$scope.items=['1','4','3','8'];
Elements from array items related to type moves to the top.
Similarly, eg: even is selected , the state becomes
$scope.type=['square','even','odd','prime'];
$scope.items=['4','8','1','3'];
Bold elements are highlighted on page. I use a custom filter in ng-repeat for showing and sorting according to the relation.
What I want is after it's sorted, the same state is stored in the original arrays. Now when I select an element from $scope.items the $scope.types returns to the original state and accordingly the list on page re-adjusts which looks bad.
Track the changes to the collections either by ng-change or $watch and use the $filter service in controller to get the filtered values and store it in the same array.
Sample Demo: http://plnkr.co/edit/eW48QL2j30ZAKnwGzs3g?p=preview
<body ng-controller="MainCtrl">
<select ng-model='opt1' ng-options='option for option in options1' ng-change='filter(options2, opt1)'></select>
<select ng-model='opt2' ng-options='option for option in options2 | filter:opt1'></select>
<button ng-click='clear()'>Clear</button>
</body>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $filter) {
$scope.options1 = ['A','C','J'];
$scope.options2 = ['Andrew','Chris Martin', 'Jeeva'];
$scope.filter = function(collection, value){
$scope.newoptions2 = $filter('filter')(collection, value);
console.log($scope.newoptions2);
$scope.options2 = $scope.newoptions2;
$scope.options1 = [value];
};
$scope.clear = function(){
$scope.options1 = ['A','C','J'];
$scope.options2 = ['Andrew','Chris Martin', 'Jeeva'];
}
});
Replace the 'filter' with your 'customFilter'. Let me know if these helps.