In most cases people use:
$scope.fields = [
{name: "name", desc: "its name", required: "yes"},
{name: "surname", desc: "its surname", required: ""}
];
I prefer this type of array:
$scope.fields = [
["name", "its name", "required"],
["surname", "its surname", ""]
];
so I can easy use splice function to modify elements.
I created list of input fields like this:
<li class="ng-class:item[2]" ng-repeat="field in fields">
<div>{{field[1]}}: <input type="text" data-ng-model="field[0]" name="field[0]" id="field[0]" /> </div>
</li>
Can anyone explain why input fields are initially filled with name or surname values not empty?
Related
I have the following HTML:
<div ng-controller="CreateSpreadsheetCtrl as csCtrl" ng-init="csCtrl.init()">
<select multiple="multiple" style="height:100px;" class="form-control"
ng-model="csCtrl.Template.BusinessUnitMappings"
ng-options="department as department.LocalizedName for department in csCtrl.DepartmentMasters">
</select>
</div>
Inside the CreateSpreadsheetCtrl.init(), we are loading an array called "DepartmentMasters" (csCtrl.DepartmentMasters) which contains a list of objects (e.g. {Id:1, Name: "Department 1" }, {Id:2, Name: "Department 2" }).
Also in the init() method, we load this "csCtrl.Template" object, which has a property inside it called "BusinessUnitMappings" (csCtrl.Template.BusinessUnitMappings), which is an array of DepartmentMaster objects.
With the above code, it binds correctly to the model and when you change the selections, csCtrl.Template.BusinessUnitMappings is bound correctly.
However, when csCtrl.Template.BusinessUnitMappings is pre-loaded with an existing array of objects, it doesn't select it in the UI when the page initially loads.
Change the expression to :
ng-options="department as department.Name for department in csCtrl.DepartmentMasters track by department.Id"
Working Demo :
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl',function($scope) {
var ctrl = this;
ctrl.DepartmentMasters = [
{Id:1, Name: "Department 1" },
{Id:2, Name: "Department 2" },
{Id:3, Name: "Department 3" },
{Id:4, Name: "Department 4" },
{Id:5, Name: "Department 5" }
];
ctrl.Template = {
"BusinessUnitMappings" : [
{Id:2, Name: "Department 2" },
{Id:3, Name: "Department 3" }
]
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl as csCtrl">
<select multiple="true" style="height:100px;" class="form-control"
ng-model="csCtrl.Template.BusinessUnitMappings"
ng-options="department as department.Name for department in csCtrl.DepartmentMasters track by department.Id"></select>
</div>
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
I need your help.
I'm implementing multiple dropdowns using ng-repeat from json. And I want that once value is selected in one dropdown it should not appear in another dropdowns. i'm new in angularjs. here is my json. I want "data" in drop down with selected value columnindex.
$scope.records = [
{
"userId": "10",
"fisrtname": "Unnati",
"lastName": "Chauhan",
"dateVal": "22-05-2016",
"columnindex": "1",
"data": [{value: 1, text: 'USERID'},
{value: 2, text: 'FIRSTNAME'},
{value: 3, text: 'LASTNAME'},
{value: 4, text: 'DOB'}]
},
{
"userId": "20",
"fisrtname": "Ranju",
"lastName": "Shinde",
"dateVal": "21-05-2016",
"columnindex": "2",
"data": [{value: 1, text: 'USERID'},
{value: 2, text: 'FIRSTNAME'},
{value: 3, text: 'LASTNAME'},
{value: 4, text: 'DOB'}]
},
{
"userId": "30",
"fisrtname": "Smruti",
"lastName": "Modi",
"dateVal": "20-05-2016",
"columnindex": "3",
"data": [{value: 1, text: 'USERID'},
{value: 2, text: 'FIRSTNAME'},
{value: 3, text: 'LASTNAME'},
{value: 4, text: 'DOB'}]
}];
my html code is
<div ng-controller="multipleDropDown">
<div ng-repeat= "us in records" >
<select ng-model="us.columnindex" ng-options="item.value as item.text for item in us.data|arrayDiff:us.data:item.value">
</select>
</div>
</div>
you need to add below code in your dropdown elements so as to avoid recursive calls to all three of your dropdowns during change in ng-model values.
ng-model-options="{ updateOn: 'change', debounce: { change: 0 } }"
Also there is a function which updates data object of your $scope.records array. Please take a look at this fiddle. I think this is what the specific thing is which you wanted.
I have an array multidimensional with multiples results:
books: any[] = [
{
name: "The Name book",
chapter: [{
name: 'Alpha',
pages: '180'
}, {
name: 'Beta',
pages: '100'
}]
},
{
name: "Jungle Book",
chapter: [{
name: 'Whole book',
pages: '300'
}]
}
]
I would like to understand how to create a *ngIf when a book has just one chapter like "Jungle book" or multiples as "The Name Book."
Thanks for your help
I am not sure I have fully understood the selection creteria.
Anyway, assuming the template where you want to add the *ngIf check is defined in the same Component where you define the books property, I would try something like this
In the template
<div *ngFor="let book of books">
<div *ngIf="isBookToShow(book)">
<!-- here goes the rest of your html -->
</div>
</div>
with the corresponding method isBookToShow(book) in the class
isBookToShow(book) {
return book.chapter.length > 0
}
I have a form that has a set of radio buttons (3 choices), and I am using angular and the ng-repeat directive to populate the html:
<div ng-repeat="fruit in fruitbasket">
<input type="radio" name="fruit" data-ng-model="fruit.isSelected">{{fruit.id}}
</div>
the inside of the controller for the fruit basket looks like this:
$scope.fruitbasket = [{isSelected: false, id: "Orange", value: "1"}, {isSelected: true, id: "Pear", value: "2"}, {isSelected: false, id: "Apple", value: "3"}]
The choices in the view are Orange, Pear, and Apple, but after one is selected I want to pass the numeric "value"
Not sure how to do this in angular, I have tried several things, but non successful. Each time the passed value shows as nil
How does a connected element of an object get passed from a radio button in Angularjs?
Here's how you do it:
isSelected is not needed. The fruitbasket is not part of your model, only the selected fruit is.
$scope.fruitbasket = [
{id: "Orange", value: "1"},
{id: "Pear", value: "2"},
{id: "Apple", value: "3"}
];
$scope.model={selectedFruit:2};
Assign the value (fruit.value) to each option and bind it to your model (model.selectedFruit)
<input value="{{fruit.value}}" data-ng-model="model.selectedFruit" type="radio" name="fruit" > {{fruit.id}}
Check out this working plnkr example.