Does angular-schema-form have a method to show preselected values?
When the titleMap on the select will set an integer, preselected values will show. But if it will set an object, I found no way of showing the correct name.
Is there anything to tie the object to, like with ng-options where you can set an attribute to compare them with the "track by" clause?
ng-options="option as option.name for option in array track by option.id"
In my example code, cats1 will set an object, cats2 will set an integer.
HTML:
<body>
<div ng-controller="MainCtrl">
<div class="login-container">
<form name="myForm"
sf-schema="schema"
sf-form="form"
sf-model="model">
</form>
</div>
</div>
</body>
Controller:
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.form = [
{
key: 'cats1',
type: 'select',
titleMap: [
{value: {id: 0, name: "Leopard"}, name: "Leopard"},
{value: {id: 1, name: "Tiger"}, name: "Tiger"}
]
},
{
key: 'cats2',
type: 'select',
titleMap: [
{value: 0, name: "Leopard"},
{value: 1, name: "Tiger"}
]
}
];
$scope.schema = {
"type": "object",
"properties": {
"cats1": {
"title": "Cats",
"type": "object"
},
"cats2": {
"title": "Cats",
"type": "number"
}
}
};
$scope.model = {cats1: {id: 1, name: "Tiger"}, cats2: 1};
}]);
Here is a plunkr:
https://plnkr.co/edit/0hK5Hrc9GXklfRwa6fjE?p=preview
Related
I am trying to pass parameter to function changeBoard whole variable item but If i dont set value="item._id" i can't have default value. If I set i can only pass item._id.
Can someone help me how can I pass whole parametere item at the same time have default selected?
demo
https://codepen.io/Turqus/pen/LOjvLL?editors=1111
var app = angular.module('test', []);
template html
<div ng-app="test" ng-controller="select">
<select class="form-control" ng-model="selectedBoard" ng-change="changeBoard(selectedBoard)">
<option ng-repeat="item in arrayItems" value="{{item.id}}">{{item.name}}</option>
</select>
</div>
controller
var app = angular.module('test', []);
app.controller('select', $scope=>{
$scope.arrayItems = [
{'id': '133', 'name':'first', 'lists':[{'name': 1}, {'name': 2}]},
{'id': '134', 'name':'second', 'lists':[{'name': 1}, {'name': 2}]},
{'id': '135', 'name':'third', 'lists':[{'name': 1}, {'name': 2}]},
{'id': '136', 'name':'fourth', 'lists':[{'name': 1}, {'name': 2}]}
];
$scope.selectedBoard = '134';
$scope.changeBoard = (selectedBoard) => {
console.log(selectedBoard)
}
});
You can use the Javascript function .filter(). It's kind of like an SQL WHERE statement, but for Javascript arrays. It'll just filter out anything based on the function given for it.
In my example, you can remove the pass of selectedBoard to the function call in your ng-change method. Since you are already binding to the model $scope.selectedBoard.
! function() {
var app = angular.module('test', []);
var select = function($scope) {
$scope.arrayItems = [{
'id': '133',
'name': 'first',
'lists': [{
'name': 1
}, {
'name': 2
}]
},
{
'id': '134',
'name': 'second',
'lists': [{
'name': 1
}, {
'name': 2
}]
},
{
'id': '135',
'name': 'third',
'lists': [{
'name': 1
}, {
'name': 2
}]
},
{
'id': '136',
'name': 'fourth',
'lists': [{
'name': 1
}, {
'name': 2
}]
}
];
$scope.selectedBoard = '';
$scope.changeBoard = () => {
var obj = $scope.arrayItems.filter(item => item.id == $scope.selectedBoard);
// var obj = $scope.arrayItems.filter(function(item) { // Can also be written as this
// return item.id == $scope.selectedBoard;
// });
console.log(obj);
}
};
app.controller("select", ["$scope", select]);
}();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="select">
<select class="form-control" ng-model="selectedBoard" ng-change="changeBoard()">
<option ng-repeat="item in arrayItems" value="{{item.id}}">{{item.name}}</option>
</select>
</div>
I am new to AngularJs and Google charts. My requirement is to show Google charts dynamically in ng-repeat for each li.
<li ng-repeat="ques in surveyquestions">
<label for="{{ques['questions']}}">
{{ques['id']}} {{ques['questions']}}
</label>
<div ng-init="calltry(ques['option_array'],ques['id'])"></div>
<div id="chartdiv{{ques['id']}}"></div>
</li>
In above code through ng-init I pass the data to render the Google chart. In JavaScript I used as below but it's not working.
var chart = new google.visualization.ColumnChart(document.getElementById('chartdiv'+id));
It's working fine when id is static like below.
<div id="chartdiv"></div>
var chart = new google.visualization.ColumnChart(document.getElementById('chartdiv'));
Please help to sort out what is the issue.
Try with angular-google-chart,
Refer :https://angular-google-chart.github.io/angular-google-chart/docs/latest/examples/bar/
<div class="chartContainer" ng-repeat="data in arrayDiv">
<div layout-padding layout-margin google-chart chart="drawChart(data)">
</div>
</div>
$scope.drawChart = function (value) {
$scope.chartData = [];
var chartValue = {
c: [{
v: 'subject
}, {
v: 5,
f: " questions"
}, {
v: 6,
f: " questions"
}]
};
$scope.chartData.push(chartValue);
$scope.qaChart = {};
$scope.qaChart.type = "BarChart";
$scope.qaChart.data = {
"cols": [{
id: "Sections",
label: "Subject",
type: "string"
}, {
id: "Correct",
label: "Correct",
type: "number"
}, {
id: "Wrong",
label: "Wrong",
type: "number"
}],
"rows": $scope.chartData
};
$scope.qaChart.options = {
"isStacked": "true",
"fill": 20,
"displayExactValues": true,
"colors": ['#4CAF50', '#EF5350', '#00adee'],
"vAxis": {
"title": " Questions",
},
"hAxis": {
"title": "Details",
}
};
return $scope.qaChart;
};
my controller has the json for my form then i have a directive that gets repeated to produce the form elements. based on the 'type' passed to the directive, the directive should know how to render the element.
but i don't know why it's not rendering the form templates properly here but that's a separate issue.
my immediate issue is, i can't seen to pass the ng-model and bind it correctly to the template.
does anyone see my problem?
var myApp = angular.module('myApp', []);
myApp.directive('ioProductElement', ['$compile', function ($compile) {
var dropdownTemplate = '<select ng-model="model" ng-options="option.Text for option in data"></select>';
var textAreaTemplate = '<textarea ng-model="model" class="form-control">{{ data }}</textarea>';
var radioListTemplate = '<span ng-repeat="item in data.Items"><input ng-model="model" type="radio" name="{{ data.Name }}" ng-checked="item.Selected" /><label>{{ item.ProductLabel }}</label> </span>';
return {
restrict: 'E',
replace: true,
scope: {
model: '=',
type: '=',
data: '='
},
link: function (scope, element) {
var getTemplate = function (type) {
var template = '';
switch (type) {
case 'SelectListItem':
template = dropdownTemplate;
scope.model = _.find(scope.data, {
Selected: true
});
break;
case 'TextArea':
template = textAreaTemplate;
break;
case 'RadioList':
template = radioListTemplate;
break;
}
return template;
};
element.html(getTemplate(scope.type));
$compile(element.contents())(scope);
}
};
}]);
myApp.controller('DynamicFormController', function () {
this.productElement = {};
this.product = {
ProductName: 'Online Form',
Company: 'TEST',
Data: []
};
this.productItems = [{
ProductLabel: "Status",
ProductType: "SelectListItem",
ProductData: [{
"Text": "Item1",
"Value": "1",
Selected: true
}, {
"Text": "Item2",
"Value": "2"
}]
}, {
ProductLabel: "Publication",
ProductType: "SelectListItem",
ProductData: [{
Text: 'Item1',
Value: '1'
}, {
Text: 'Item2',
Value: '2',
Selected: true
}]
}, {
ProductLabel: "Caption",
ProductType: "TextArea",
ProductData: "this is some data for the textarea"
}, {
ProductLabel: "Display Advertising",
ProductType: "RadioList",
ProductData: {
Name: "classifiedAdvertising",
Items: [{
Text: 'Full Page',
Selected: true
}, {
Text: '1/2 Page'
}]
}
}, {
ProductLabel: "Status2",
ProductType: "SelectListItem",
ProductData: [{
"Text": "Item1",
"Value": "1"
}, {
"Text": "Item2",
"Value": "2"
}, {
"Text": "Item3",
"Value": "3",
Selected: true
}]
}, ];
this.save = function () {
this.product.Data = this.productItems;
console.log('in save', this.product);
};
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.4.0/lodash.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="col-sm-12" ng-app="myApp">
<br />
<form class="form-horizontal" ng-controller="DynamicFormController as ctrl">
<div class="form-group" ng-repeat="item in ctrl.productItems">
<label class="col-sm-2 control-label">{{ item.ProductLabel }}</label>
<div class="col-sm-10">
<io-product-element data-model="ctrl.productElement[item.ProductLabel]" data-type="item.ProductType" data-data="item.ProductData"></io-product-element>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="button" class="btn btn-info" data-ng-click="ctrl.save()" value="Submit" />
product: {{ ctrl.product | json }}
</div>
</div>
</form>
</div>
Try To add a break statement in the first switch case
//[...]
switch (type) {
case 'SelectListItem':
template = dropdownTemplate;
scope.model = _.find(scope.data, {
Selected: true
});
break;
case 'TextArea':
template = textAreaTemplate;
break;
case 'RadioList':
template = radioListTemplate;
break;
}
//[...]
I want to populate the selected color as selected option in selectbox in initially
link of jsfiddle
here is my partial :
<div ng-app ng-controller="QuestionController">
<ul ng-repeat="product in products">
<li>
<div>{{ product.selected | json }}</div>
<select ng-model="product.selected" ng-options="color.name for color in product.color"></select>
</li>
</ul>
</div>
controller :
function QuestionController($scope) {
$scope.products = [
{
"name": "product1",
"value": "product1",
"color": [{ name: 'red',id: 10},{ name: 'Green',id: 11},{name:'Blue',id: 12 }],
"selected": {name: 'Green', id: 11 }
},
{
"name": "product2",
"value": "product2",
"color": [{ name: 'red',id: 10},{ name: 'Green',id: 11},{name:'Blue',id: 12 }],
"selected": {name: 'red', id: 10 }
},
{
"name": "product3",
"value": "product3",
"color": [{ name: 'red',id: 10},{ name: 'Green',id: 11},{name:'Blue',id: 12 }],
"selected": {name: 'Blue',id: 12 }
}
];
}
Try this:
<select ng-model="product.selected" ng-options="color.name for color in product.color track by color.id"></select>
$scope.activities =
[
{ id: 1, type: "DROPDOWN_MENU", name: "Dropdown Menu" },
{ id: 2, type: "HORIZONTAL_BAR", name: "Horizontal Bar" }
];
<select data-ng-model="engineer.currentActivity" data-ng-options="a.name for a in activities">
</select>
Using the above I am able to create a select box with 3 values, a blank one and then dropdown menu and horizontal bar.
I would like to set Horizontal Bar as my default and cannot see how to do this.
Help would be great
In the controller, just add a line to setup the initial selection:
$scope.activities =
[
{ id: 1, type: "DROPDOWN_MENU", name: "Dropdown Menu" },
{ id: 2, type: "HORIZONTAL_BAR", name: "Horizontal Bar" }
];
$scope.engineer = {}; // if needed
$scope.engineer.currentActivity = $scope.activities[1];
In your angular controller:
$scope.activities = [
{ id: 1, type: "DROPDOWN_MENU", name: "Dropdown Menu" },
{ id: 2, type: "HORIZONTAL_BAR", name: "Horizontal Bar" }
];
$scope.activity = $scope.activities[1]; //Bind 2nd activity to the model.
In the HTML:
<select ng-model="activity"
ng-options="activity as activity.name for activity in activities">
<option value=""></option>
</select>
See the Fiddle
Use ng-init directive
ng-init="engineer.currentActivity = options[1]"