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.
Related
I have the following JSON complex object.
{"User":
{
"$id":"2",
"Id":0,
"FirstName":null,
"LastName":null,
"Email":null,
"EmailConfirmed":false,
"PasswordHash":null,
}
}
How to bind this object in knockout js. So far I have used somethind like this to bind property with input field.
<input required class="form-control" data-bind="value: User.FirstName" type="text" />
Functions bo build model in knockout.
function userModel() {
var self = this;
self.User = ko.observable();
}
function bindData(data) {
userInfo.User(data["User"]);
}
When I call submiting via JS.
var jsonData = ko.toJSON(userInfo);
Object jsonData show that property like FirstName is null, however in formular value has been written.
Object userInfo stores written values in formular, I have checked it.
Should it look like this?
function userModel() {
var self = this;
self.Password = ko.observable();
self.User = ko.observable();
}
function UserViewModel(user) {
this.FirstName = ko.observable(user.FirstName);
this.LastName = ko.observable(user.LastName);
// other properties
}
function bindData(data) {
userInfo.Password(data["Password"]);
userInfo.User(new UserViewModel(data["User"]));
}
$(document).ready(function () {
userInfo = new userModel();
createUser();
ko.applyBindings(userInfo);
});
For two way binding to work, you need to build the same hierarchy of observable values on the view model.
Alternatively, you could use the mapping plugin:
Since User is also a observable, you have to update your binding like so:
<input required class="form-control" data-bind="value: User().FirstName" type="text" />
Since User has a lot of properties, you could benefit from the with binding:
Here's a fiddle with both examples (with and without the parent binding)
var data = {
"User": {
"$id": "2",
"Id": 0,
"FirstName": "Joseph",
"LastName": "Campbell",
"Email": null,
"EmailConfirmed": false,
"PasswordHash": null,
}
}
function UserViewModel(user) {
this.FirstName = ko.observable(user.FirstName);
this.LastName = ko.observable(user.LastName);
// other properties
}
function bindData(data) {
userInfo.User(new UserViewModel(data["User"]));
}
function userModel() {
var self = this;
self.User = ko.observable();
}
var userInfo = new userModel();
bindData(data);
ko.applyBindings(userInfo);
input {
display: block;
margin: 5px 0;
}
input[readonly] {
border: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<form data-bind="with: User">
<input type="text" data-bind="value: FirstName" />
<input type="text" data-bind="value: LastName" />
</form>
Current values:
<input type="text" readonly data-bind="value: User().FirstName" />
<input type="text" readonly data-bind="value: User().LastName" />
Here i have one form and one form fields , that is checkbox,after checking the the three fields i want to make JSON format , but i am not able do this,if anyone one know please update my answer.
function rentfunction(){
var arr1 = [];
$.each($("input[name='furniture_check']:checked"),function(){
var furniture = $(this).val();
arr1.push(furniture);
});
var data = {
"rentProperty" :{
"furnitureType" :arr1,
}
}
console.log(data);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form>
<input type="checkbox" name="furniture_check" value="Ward robe">Ward robe <br>
<input type="checkbox" name="furniture_check" value="Lights">Lights <br>
<input type="checkbox" name="furniture_check" value="Fan">Fan <br>
<input type="checkbox" name="furniture_check" value="Fridge">Fridge <br><br><br>
<button type="button" id="rentBtnSubmit" onclick="rentfunction()">Submit</button>
</form>
expected answer
suppose i am clicking Ward robe & Lights & Fridge and i am clicking the submit button means i want to make json like this
{
"rentProperty":
{
"fullName" : "Some Name"
},
"floorType": [
{
"floorTypeName": "Ward robe"
},
{
"floorTypeName" :"Lights"
},
{
"floorTypeName" :"Fridge"
}
]
}
I am also tried but i am not able to make expected JSON format,i am getting results like this
{
"rentProperty": {
"furnitureType": [
"Ward robe",
"Lights",
"Fan"
]
}
}
here is the modified code for your desired output:
function rentfunction(){
var arr1 = [];
var data={
"rentProperty": {
"fullName" : "Some Name"
},
"floorType":[]
};
$.each($("input[name='furniture_check']:checked"),function(){
var furniture = $(this).val();
arr1.push({"floorTypeName": furniture });
});
data.floorType=arr1;
//or data["floorType"]=arr1;
console.log(data);
}
Here is how you could get your desired output:
$('#rentBtnSubmit').click(function () {
var data = {
rentProperty: {
name: "some name"
},
floorType: $.map($("input[name=furniture_check]:checked"), function(chkbox){
return { floorTypeName: $(chkbox).val() };
})
};
console.log(data);
return false; // if you need to cancel submission.
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="checkbox" name="furniture_check" value="Ward robe">Ward robe <br>
<input type="checkbox" name="furniture_check" value="Lights">Lights <br>
<input type="checkbox" name="furniture_check" value="Fan">Fan <br>
<input type="checkbox" name="furniture_check" value="Fridge">Fridge <br><br><br>
<button type="button" id="rentBtnSubmit">Submit</button>
</form>
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>
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>
I'm building an Angular app connected to an REST service which does server-side input validation.
e.g. if I send a object to the server with JSON like:
entry: { id: 5, name: "Test", locales: ["de","en"] }
I will get an response like:
{ id: 5, name: "Test", countries: ["de","en"],
__errors__: [
{ field: "entry.name", message: "Test already in use" },
{ field: "entry.countries[1]", message: "'en' is not a country" }
]
}
(quotation marks omitted for better reading)
The field value is the "path" in javascriptish notation to the original value which caused the problem.
I'm somewhat free in what notation I will choose but I like this one because it's easy to read and integrates with the rest of the system. But I'm open to better suggestions.
The Question:
Now I want Angular to show which field failed with which message. What's the best way of doing this?
I tried things like $scope.EditForm.$setValidity( field, message ) but it has no effect.
(nb: I'm using Angular with Bootstrap)
Why not return an errors object that you bind to in your markup?
Here's a fiddle: http://jsfiddle.net/edeustace/UMRU9/2/
Here's a snippet:
<div ng-app="App" ng-controller="Ctrl">
<input id="name" type="text" ng-model="name"></input>
<span ng-show="errors.name" style="color: red">{{errors.name}}</span>
<br/>
<input id="lastName" type="text" ng-model="lastName"></input>
<span ng-show="errors.lastName" style="color: red">{{errors.lastName}}</span>
<div ng-repeat="c in countries">
<input ng-model="c" type="text"></input>
<span style="color: red" ng-show="errors.countries[$index]">{{errors.countries[$index]}} </span>
</div>
<button ng-click="submit()">Submit</button>
</div>
Js:
var app = angular.module('App', []);
app.controller('Ctrl', function($scope){
$scope.name = "Ed";
$scope.lastName = "Eustace";
$scope.countries = ["Ireland", "England"];
$scope.submit = function(){
$scope.errors = {name: "Name in use", lastName: "", countries: ["Ireland is not available"] };
}
});
That way you only need to wire up the ui and the update will happen for free due to data binding.