I have web service call. I am getting response from webservice like this :
var SSOUserResponse = [
{
"UserName": "se",
"FirstAndLastName": "Sam ",
"EmailAddress": "segfgf#x.net"
},
{
"UserName": "se2",
"FirstAndLastName": "Joe ", //
"EmailAddress": "se266#gmail.com" //
}
];
or
SSOUserResponse array length can me more also.
$scope.launchArray = [];
I want to display this data in my templete.
What I am doing :
if (SSOUserResponse.length > 1) {
var launchArrayVal = [];
for (var i = 0; i < SSOUserResponse.length;i++){
launchArrayVal.push(
{ name: SSOUserResponse[i].UserName, email: SSOUserResponse[i].EmailAddress }
);
$scope.launchArray = launchArrayVal;
}
}
I have a templete :
<div class="modal-body">
<div>Please select an one data</div>
<div>
<input type="radio" ng-model="launchArray" name="group1" value="{{launchArray.name}}">
</div>
</div>
I want to display radio button with with username and email to display..
I tried ng-repeat also. It is not working.
Can u guide me what I doing wrong or what I can do?
Checkout this
<div class="modal-body">
<div>Please select an one data</div>
<div ng-repeat = 'item in launchArray'>
<input type="radio" ng-model="selected.value" name="group" ng-value="item.name">
<div> Name : {{item.name}}</div>
<div> Email : {{item.email}}</div>
</div>
</div>
<br>
<br>
<br>
<br>
<div >
<b>Selected Value :: </b>{{selected.value}}
</div>
var SSOUserResponse = [
{
"UserName": "se",
"FirstAndLastName": "Sam ",
"EmailAddress": "segfgf#x.net"
},
{
"UserName": "se2",
"FirstAndLastName": "Joe ", //
"EmailAddress": "se266#gmail.com" //
}
];
if (SSOUserResponse.length > 1) {
var launchArrayVal = [];
for (var i = 0; i < SSOUserResponse.length;i++){
launchArrayVal.push(
{ name: SSOUserResponse[i].UserName, email: SSOUserResponse[i].EmailAddress }
);
}
$scope.launchArray = launchArrayVal;
$scope.selected = {value: null};
}
You want to show one radio button per result, right?
This is when you would use ng-repeat. You didn't mention what the problem was when you used ng-repeat.
Currently, in your template, you're doing {{launchArray.name}} which won't work, since launchArray is an array... it doesn't have a name property.
Using ng-repeat, you loop over each item in launchArray and render a radio button each time:
<div class="modal-body">
<div>Please select an one data</div>
<div ng-repeat="item in launchArray">
<input type="radio" name="group1" value="{{item.name}}">
<span>{{item.name}} ({{item.email}})</span>
</div>
</div>
Related
Angular 1 app here.
I have this json file named data.json:
[
{
"rejectionType": "REJECTION_1",
"user": "ALL",
"selected": false
},
{
"rejectionType": "REJECTION_2",
"user": "MALE",
"selected": false
},
{
"rejectionType": "REJECTION_3",
"user": "FEMALE",
"selected": false
}
]
In controller I do the following:
$http.get('data.json').then(function(response) {
var rejectionData = response.data;
myctrl.currentRejections = _.filter(rejectionData, function(item, index) {
return _.contains(["ALL", "MALE"], item.user);
})
console.log("myCtrl.currentRejections:",myCtrl.currentRejections);
$("#modRejectionReason").modal("show");
});
The modal in the view looks like this:
<div id="modRejectionReason">
<div class="modal-body">
<p>
<div ng-repeat="allrejections in myctrl.currentRejections">
<p>
<input type="radio" name="selected" ng-model="allrejections.selected" />
{{allrejections.rejectionType}}
</p>
</div>
</p>
</div>
<div class="modal-footer">
<button type="button" ng-click="myctrl.func()">OK</button>
</div>
</div>
</div>
</div>
And then in the controller I have this:
var declineInvite = function () {
console.log("myctrl.currentRejections:",myctrl.currentRejections);
}
In the log I see that when the modal appears, then the variable myCtrl.currentRejections is printed. And it is an array with all the filtered elements.
For each element I see that the field selected is false.
When I then check a radio button and then click on the OK-button the function func is triggered.
Even here the same data is printed in the console. However, for those radio buttons that have been clicked in the json the value for the field selected is undefined.
What am I missing here?
You need to give the radio buttons a value to set when they are checked.
<input type="radio" name="selected" ng-model="allrejections.selected" ng-value="true"/>
The problem with doing this in your current code is that the selected:true will never be unset, so I suggest adding a new value on the controller called selectedRejection and using that as the model and setting the value to the actual rejection object. Doing this means you can get rid of the selected property on your JSON data too!
var myApp = angular.module('myApp', []).controller("MyCtrl", MyCtrl);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl() {
var MyCtrl = this;
MyCtrl.currentRejections = [{
"rejectionType": "REJECTION_1",
"user": "ALL",
"selected": false
},
{
"rejectionType": "REJECTION_2",
"user": "MALE",
"selected": false
}
]
MyCtrl.selectedRejection = null;
MyCtrl.submit = function() {
console.log(MyCtrl.selectedRejection)
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyCtrl as MyCtrl">
<div ng-repeat="allrejections in MyCtrl.currentRejections">
<p>
<input type="radio" name="selected" ng-model="MyCtrl.selectedRejection" ng-value="allrejections" /> {{allrejections.rejectionType}}
</p>
</div>
<button type="button" ng-click="MyCtrl.submit()">OK</button>
</div>
</body>
Is it possible to show only a list of checked items in a checkbox list?
What I want to do is select a few items on a checked list and when I press "Show only checked items", I want to toggle between showing only the checked items in the checkbox list and showing the entire list with the checked items.
I searched angular's site but wasn't able to find a solution to it.
Fiddle: http://jsfiddle.net/fjoLy5sq/422/
<div ng-controller="DemoCtrl">
<label ng-repeat="role in roles">
<input type="checkbox" checklist-model="user.roles" checklist-value="role.id"> {{role.text}}
</label>
<br>
<button ng-click="checkAll()">check all</button>
<button ng-click="uncheckAll()">uncheck all</button>
<button ng-click="checkFirst()">check first</button>
<button ng-click="checkFirst()">Show only Checked</button>
<br><br>
user.roles {{ user.roles | json }}
</div>
Javascript:
angular.module("DemoApp", ["checklist-model"])
.controller('DemoCtrl', function($scope) {
$scope.roles = [
{id: 1, text: 'guest'},
{id: 2, text: 'user'},
{id: 3, text: 'customer'},
{id: 4, text: 'admin'}
];
$scope.user = {
roles: [2, 4]
};
$scope.checkAll = function() {
$scope.user.roles = $scope.roles.map(function(item) { return item.id; });
};
$scope.uncheckAll = function() {
$scope.user.roles = [];
};
$scope.checkFirst = function() {
$scope.user.roles.splice(0, $scope.user.roles.length);
$scope.user.roles.push(1);
};
});
Add a new variable in controller:
$scope.showAll = true;
In a view inverse the value of showAll when Show only Checked button is clicked:
<button ng-click="showAll = !showAll">Show only Checked</button>
To show only checked items, use Array.includes method, and check that current role is in user.roles:
<label ng-repeat="role in roles" ng-if="user.roles.includes(role.id)">
<input type="checkbox" checklist-model="user.roles" checklist-value="role.id"> {{role.text}}
</label>
Working demo
I cannot get a nested foreach to work. I have the following code:
HTML - Snippet
<div data-bind='foreach: choice'>
<p data-bind='foreach: id'>
<input name="group1" type="radio" data-bind="attr: { id: $data }"/> <label data-bind="attr: { for: $data} "> <span data-bind=" text: $data"> </span>
</label>
</p>
</div>
Javascript - Snippet
var questionModel = {
question : ko.observable(),
id: ko.observableArray(),
choice: ko.observableArray()
}
function startTest() {
questionModel.question(questions[questionNo].question);
var m = [];
var i = [];
var e = 0;
while (e != 4) {
m.push(choices[questionNo][e].choice);
i.push(choices[questionNo][e].id);
e++;
}
questionModel.choice(m);
questionModel.id(i);
}
Essentially what I'm trying to accomplish is for each choice to be generated within a radio button and to have the IDs within the array be the id for the radio button and label. I've successfully displayed the choices on it's own. But when I added the data-bind='foreach: id' & data-bind='attr: { id: $data }', that's when things stopped working. I keep getting the error below:
ReferenceError: Unable to process binding "foreach: function (){return
id }" Message: id is not defined
Disclaimer: I've tested the data and everything for the arrays are fine.
I'm sorry for not using your code layout, I couldn't find where questions was declared or where the bindings were applied. I made an example here using a simple 3 item data model, QuestionModel, and a simple view model containing it.
The data model just contains the ID for the question, the question itself (title) and then the choices for that question. Loop through each question, and then each of the choices. You can expand on the choices for values or whatever if you'd like. Just make an array of objects.
[{
"AnswerText": "Blue",
"AnswerValue" : "#0000FF"
}]
function QuestionModel(data) {
var self = this;
self.Id = ko.observable(data.Id);
self.Title = ko.observable(data.Title);
self.Choices = ko.observableArray(data.Choices);
}
function ViewModel() {
var self = this;
self.Questions = ko.observableArray([
new QuestionModel({
"Id": 1,
"Title": "What color are rabbits?",
"Choices": ["Red", "Blue", "Green"]
}),
new QuestionModel({
"Id": 2,
"Title": "What color are dogs?",
"Choices": ["Silver ", "Golden", "Striped"]
}),
new QuestionModel({
"Id": 3,
"Title": "What color are cats?",
"Choices": ["white", "Black", "Orange"]
})
]);
}
ko.applyBindings(new ViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div data-bind="foreach: Questions">
<span data-bind="text: Title"> </span>
<div data-bind="foreach: Choices">
<input type="radio" data-bind="value: $data, attr : {name : $parent.Id}" />
<span data-bind="text: $data"></span>
<br>
</div>
</div>
Since id is not part of choice, you need to use $parent to reference it:
data-bind="foreach: $parent.id"
https://jsfiddle.net/mbest/08gk7h4v/
You should add an array of choices that look like {id: 1} to the model. Then you can loop over the choices and reference the id property like so:
var questionModel = {
question: ko.observable(),
choice: ko.observableArray()
}
function startTest() {
questionModel.question(questions[questionNo].question);
var m = [];
var e = 0;
while (e != 4) {
var choice = choices[questionNo][e];
m.push(choice);
e++;
}
questionModel.choice(m);
}
<div data-bind="foreach: choice">
<p>
<input name="group1" type="radio" data-bind="attr: { id: id }" />
<label data-bind="attr: { for: id }">
<span data-bind="text: id"> </span>
</label>
</p>
</div>
I cant seem to get the binding to work on my KnockoutJS app.
JSFIDDLE -> http://jsfiddle.net/maylortaylor/pfqnkj17/
Here is the format of my JSON (generated by using <pre data-bind="text: ko.toJSON($root.forms,null,2)"></pre>)
[
{
"formTitle": "formTitle",
"formDescription": "formDesc",
"fieldTemplates": [
{
"fieldId": "text1",
"title": "title",
"description": "description fieldTemplate",
"isReq": true
},
{
"fieldId": "text2",
"title": "ttitle22",
"description": "description fieldTemplate 2",
"isReq": false
}
]
}
]
And here is how i am trying to call it in the page
<div id="MiddleColumn">
<input data-bind="textInput: $root.formTitle" type="text" placeholder="Title" class="span8 hideOffFocus input-full large-type">
<input data-bind="textInput: formDescription" type="text" placeholder="Description" class="hideOffFocus input-full">
</div
neither of those bindings work.
I create the forms object here
var FormModel = function (forms) {
var self = this;
self.forms = ko.observableArray(ko.utils.arrayMap(forms, function (form) {
return {
formTitle: form.formTitle, formDescription: form.formDescription,
fieldTemplates: ko.observableArray(form.fieldTemplates) };
}));
};
ko.applyBindings(new FormModel(initialData));
i hope your are expecting something like this
Working fiddle here
Now if you change something in textboxes in preview you can see automatic updates i.e mapping does make things back to ko way .
View Model :
var mapping = {
'fieldTemplates': {
create: function (options) {
return new FormModel(options.data);
}
}
}
function FormModel(forms) {
var self = this;
self.forms = ko.observableArray();
ko.mapping.fromJS(forms, mapping, self);
// other stuff
}
View :
<div id="MiddleColumn">
<input data-bind="textInput: $root.formTitle" type="text" />
<input data-bind="textInput: $root.formDescription" type="text"/><br/>
<div data-bind="foreach:$root.fieldTemplates">
<span data-bind="text:fieldId"></span>
<span data-bind="text:title"></span>
<span data-bind="text:description"></span>
<span data-bind="text:isReq"></span>
<br/>
</div>
</div>
Here is my static info:
$scope.users = {
"Eriks": {
"name": "Kreg",
"surname": "Indo",
"email": "example#example.com",
"age" : "2",
"tel" : "+123123 22"
}
};
I am adding a new user:
$scope.add = function () {
$scope.users.push({name:$scope.newUser.name, surname:$scope.newUser.surname, email:$scope.newUser.email, age:$scope.newUser.age, tel:$scope.newUser.tel});
$scope.newUser = "";
};
It works when I have different type of $scope.users like this
$scope.users = [{"name":"Kreg"}...more...];
and here is my form
<small>Name: </small> <input type="text" ng-model="newUser.name"><br/>
<small>Surname: </small> <input type="text" ng-model="newUser.surname"><br/>
<small>E-mail: </small> <input type="text" ng-model="newUser.email"><br/>
<small>Age: </small> <input type="text" ng-model="newUser.age"><br/>
<small>Telephone: </small> <input type="text" ng-model="newUser.tel"><br/>
<button ng-click="add()">add new user</button>
So what should I change in my add() function?
You can't push to an object like {}. Just set the key instead, like $scope.users[key] = userData;
Your second example works because it's a proper array that supports push.