i am developing a web application where am creating textboxes dynamically using the attributes from server. I am successfull in displaying the attribute values as html table inside modal. I need to create json object using the attributes in controller and make two way binding using angularjs. I am very new to angularjs.I need a json using the key and values like
{"NAME": "",
"TYPE: "forest"} and make two way binding for this dynamically created textboxes.
<tr ng-repeat="(key, value) in prop['properties']">
<td ><label>{{ key}}</label></td>
<td><input type="text" ng-value="value"></td>
</tr>
Just put ng-model in your input text element and bind the value to it
html
<table>
<tr ng-repeat="(key,value) in prop">
<td ><label>{{key}}</label></td>
<td><input type="text" ng-model="prop[key]"></td>
</tr>
</table>
<div>
{{prop | json}}
</div>
in controller
$scope.prop = {"NAME": "", "TYPE": "forest"} ;
demo codepen
Use ng-modal for two way binding.
HTML:
<div ng-repeat="item in items">
<input ng-model="item.value" type="text" size="40">
</div>
JavaScript:
app.controller('MainCtrl', function($scope) {
$scope.items = [
{value:'First Item'},
{value: 'Second Item'}
];
$scope.addInputItem = function() {
$scope.items.push({value:''});
};
});
Working code here: http://plnkr.co/edit/KIR7AyoF553STjOx
<div ng-app="myApp" ng-controller="controller">
Name: <input ng-model="details.name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('controller', function($scope) {
$scope.details = {};
$scope.details.name = "John Doe";
});
</script>
This might i think you were asking for
Related
Please help. I am new at angularjs, I want to bind json data into div as list using angularjs
Sample Data
"[{"T_FORM_CODE":"T12040"},{"T_FORM_CODE":"T18025"},{"T_FORM_CODE":"Q12014"},{"T_FORM_CODE":"R12039"}]"
Json Data :
const HEROES = [
{"T_FORM_CODE":"T12040"},{"T_FORM_CODE":"T18025"},{"T_FORM_CODE":"Q12014"},{"T_FORM_CODE":"R12039"}
];
Template :
<tr *ngFor="let hero of heroes">
<td>{{hero.T_FORM_CODE}}</td>
</tr>
do like this:
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="x in array">
<td>{{x.T_FORM_CODE}}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.array = [{"T_FORM_CODE":"T12040"},{"T_FORM_CODE":"T18025"},{"T_FORM_CODE":"Q12014"},{"T_FORM_CODE":"R12039"}];
});
</script>
you can use ng-repeat.
you can see plunker
<div ng-repeat ="dr in data">
{{dr.column}}
</div>
Plunker
I am using Checklist model directive with my App. I have issue, if -
I click select all button though it write up the array but its not
selecting checkbox. Same issue with Uncheck All though it empty the
model but it doesn't uncheck checkboxes.
If I select 2 or 3 randomly checkbox and click Select All Button it doesn't select All check-boxes.
Though its writing values to pushArray. But issues are checking and unchecking checkboxes.
$scope.items = [{id:1, name:"abc"},{id:2, name:"def"},{id:3, name:"ghi"}];
$scope.pushArray = [];
<table>
<tr ng-repeat="e in items">
<td class="text-right">
{{e.id}}
<input type="checkbox" checklist-change="imChanged()" checklist-model="pushArray" checklist-value="e.id" >
</td>
</tr>
</table>
I think you are pushing the complete list of object which is wrong. You just need to map the list and pass the id to the $scope
Edit: Works fine when you use $scope.pushArray as an object instead of array.
Working Plnkr
HTML
<body ng-controller="selection">
<table>
<tr ng-repeat="e in items">
<td>
<input type="checkbox" checklist-model="pushArray.ids" checklist-value="e.id"> {{e.name}}
</td>
</tr>
</table>
{{pushArray.ids | json}}
<br />
<button ng-click="select_all();">Select All</button>
<button ng-click="unselect_all();">Unselect All</button>
</body>
JS
var app = angular.module('app', ["checklist-model"]);
app.controller('selection', ['$scope', function($scope) {
$scope.items = [{
id: 1,
name: "abc"
}, {
id: 2,
name: "def"
}, {
id: 3,
name: "ghi"
}];
$scope.pushArray = { ids: []}; // Works fine when using it as an object
//$scope.pushArray = [];
$scope.select_all = function() {
$scope.pushArray.ids = $scope.items.map(function(item) { return item.id; });
};
$scope.unselect_all = function() {
$scope.pushArray.ids = [];
};
}]);
Hope it works for you!
I updated the examples on checklist-model and fix this issue. Check them out http://vitalets.github.io/checklist-model/
I am new to angularjs and trying to work with ng-repeat but somehow ng-repeat's key/value is not visible if I am trying to print it in nested tags
working:
<div>
<table>
<tr ng-repeat="prop in array">
<td><span ng-bind-html="prop.field1"></span></td>
</tr>
</table>
</div>
And below code is not working:-
<div ng-repeat="prop in array">
<table>
<tr>
<td><span ng-bind-html="prop.field1"></span></td>
</tr>
</table>
</div>
Updated:
var $app = angular.module('apps', ['ngSanitize']);
$app.controller('cntr', ['$scope', function($scope) {
$scope.guestList = [{
dob: '12/12/12'
}];
}]);
For html to show properly in angular js you have to 'sanitize' it, using the $sce provider from AngularJS. Read here: https://docs.angularjs.org/api/ng/service/$sce
In principle, before you bind your variable to html output, you have to sanitize it like this:
$scope.guest.sanitizedInput = $sce.trustAsHtml($scope.guest.res_addr1);
and html:
<td class="table-column-value res-addr1-value"><span ng-bind-html="guest.sanitizedInput"></span>
I have a simple angular app with a a data array:
app.js
var myApp = angular.module('myApp', []);
myApp.controller('Ctrl', function ($scope) {
$scope.data = [
{name: "Alice", age: 28},
{name: "Bob", age: 55},
...
];
});
index.html
<input type="text" ng-model="data.search">
<table>
<tbody>
<tr ng-repeat="row in data | filter:data.search">
<td>{{ data.name }}</td>
<td>{{ data.age }}</td>
</tr>
</tbody>
</table>
Now, I want to start using the firebase service to experience cool 3-way binding. So I do something like this:
app.js
var myApp = angular.module('myApp', ['firebase']);
myApp.controller('Ctrl', function ($scope) {
var ref = new Firebase("https://<myapp>.firebaseio.com/");
// assume there is already data in here similar to above
$scope.data = $firebase(ref);
});
Of course now my search filter breaks because $scope.data is an Object not an Array. Of course I could transform the data, but that would break the automatic 3-way binding.
So my question is - how should filters be applied to this data whilst maintaining the 3-way relationship?
You can use the orderByPriority filter first which converts the object to an array:
<tr ng-repeat="row in data | orderByPriority | filter:data.search">
Alternatively, you can use the filter in your controller to make sure $scope.data is an array to begin with.
Anant's suggestion works. Working fiddle: http://jsfiddle.net/rwk1/vqVw7/
Can't post as a comment yet.
HTML
<div ng-app="myApp">
<div ng-controller="testController">
<input type="text" ng-model="search.searchText"></input>
<div>
<ul ng-repeat="person in people | orderByPriority | filter:search.searchText">
<li>name:{{ person.name }}</li>
<li>age:{{ person.age }}</li>
</ul>
<input type="text" placeholder="name" ng-model="newPerson.name"/>
<input type="text" placeholder="age" ng-model="newPerson.age"/>
<button type="submit" ng-click="addPerson()">Add New Person</button>
</div>
</div>
</div>
JS
var myApp = angular.module('myApp', ["firebase"]);
myApp.controller('testController', function ($scope, $firebase) {
$scope.data = [{
name: "Alice",
age: 28
}, {
name: "Bob",
age: 55
}];
var peopleRef = new Firebase("https://sqt.firebaseio.com/people");
// Automatically syncs everywhere in realtime
$scope.people = $firebase(peopleRef);
$scope.addPerson = function(){
$scope.people.$add($scope.newPerson);
$scope.newPerson = "";
};
Using angular.js, I have a dynamic list of form fields I want to display to the user for editing (and later submission):
var app = angular.module('app', []);
app.controller('Ctrl', function($scope) {
$scope.fields = {
foo: "foo",
bar: "bar",
baz: "baz"
};
});
And the HTML:
<div ng-app="app" ng-controller="Ctrl">
<table>
<th>key</th>
<th>value</th>
<th>fields[key]</th>
<tr ng-repeat="(key,value) in fields">
<td>{{key}}:</td>
<td><input type="text" ng-model="value"/></td>
<td><input type="text" ng-model="fields[key]"/></td>
</tr>
</table>
</div>
See this fiddle. For a reason I don't understand, the text input boxes aren't editable. I've tried two different ways as seen above: value and fields[key]. value isn't editable at all, and fields[key] will allow one keystroke and then it blurs. What am I doing wrong? Thank you.
SET answered why it's happening, but a work-around to achieve the desired behavior would be to maintain a separate array of your keys, and run ng-repeat off those keys. I added some text fields for testing to add more properties to $scope.fields
You could use $watch to dynamically set the keys when the property count changes, if your requirements were that the field count may change.
http://jsfiddle.net/aERwc/10/
markup
<div ng-app="app" ng-controller="Ctrl">
<table>
<th>key</th>
<th>value</th>
<tr ng-repeat="key in fieldKeys">
<td>{{key}}:</td>
<td><input type="text" ng-model="fields[key]"/></td>
</tr>
</table>
<div><h6>Add a field</h6>
key: <input type="text" ng-model="keyToAdd" /><br />
value: <input type="text" ng-model="valueToAdd" />
<button ng-click="addField()">Add Field</button>
</div>
</div>
controller
var app = angular.module('app', []);
app.controller('Ctrl', function($scope) {
$scope.fields = {
foo: "foo",
bar: "bar",
baz: "baz"
};
$scope.fieldKeys = [];
$scope.setFieldKeys = function() {
var keys = [];
for (key in $scope.fields) {
keys.push(key);
}
$scope.fieldKeys = keys;
}
$scope.addField = function() {
$scope.fields[$scope.keyToAdd] = $scope.valueToAdd;
$scope.setFieldKeys();
$scope.keyToAdd = '';
$scope.valueToAdd = '';
}
$scope.setFieldKeys();
});
It is editable but after each key press your text field losing focus so that you have to click on it again to put another char.
And that happens because whole you template being re-rendered after each change in any of models. And after template re-rendered, currently there is no way to know which input should be focused. So you should create that way and you may want to write directive to hold focus on selected input.
You need to use an array of objects. Hopefully you can rework your model:
$scope.fields = [
{label: "foo", value: "foov"},
{label: "bar", value: "barv"},
{label: "baz", value: "bazv"}
];
<tr ng-repeat="field in fields">
<td>{{field.label}}:</td>
<td><input type="text" ng-model="field.value">
Fiddle.