I am newbie to Angular JS. I did find for the solution, but didn't resolved it.
As per selected value in dropdown, value should be displayed in corresponding Input box.
For Eg: If Basic is selected, corresponding value i.e 299 should be displayed in ng-model item.rate
If Advanced is selected, Corresponding value i.e. 499 should be displayed in ng-model item.rate.
HTML:
<tbody>
<tr ng-repeat="item in invoice.items ">
<td><select ng-model="item.names" ng-options="c.name for c in invoice.items track by c.id"></select></td>
<td><input type="text" ng-model="item.rate"/></td>
</tr>
</tr>
</tbody>
Angular JS:
$scope.invoice = {
items: [{id:1,name:'Basic',rate:299},
{id:2,name:'Advanced',rate:499}
]};
My Code is not working.I am unable to find out the Problem.Please help me.Thanks in advance.
you can use ngOptions full syntax value as text for item in items to bind the options with item.rate, see documentation.
ng-options="c.rate as c.name for c in invoice.items track"
Also I recommend you to avoid binding item.name to select and binding an extra filed to avoid conflicts.
refer below example.
angular.module("app", [])
.controller("myCtrl", function($scope) {
$scope.selectedItem = '';
$scope.invoice = {
items: [{
id: 1,
name: 'Basic',
rate: 299
},
{
id: 2,
name: 'Advanced',
rate: 499
}
]
};
$scope.show = function(item) {
return item.name + '(' + item.rate + ')';
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<select ng-model="selectedItem" ng-options="c.rate as c.name for c in invoice.items"></select></td>
<td><input type="text" ng-model="selectedItem" />
</div>
Related
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
Consider the snippet:
JS
var mod = angular.module('module', []);
mod.controller('controller', function($scope) {
$scope.items = [{
id: 1,
label: 'aLabel',
subItem: {
name: 'aSubItem'
}
}, {
id: 2,
label: 'bLabel',
subItem: {
name: 'bSubItem'
}
}]
$scope.getValue = function(ngmodel) {
// some code goes here...
}
});
HTML
<body ng-controller='controller'>
<div>
<table>
<tr ng-repeat='count in counter'> // 5 times
<td>
<select ng-options="item.id as item.label for item in items"
ng-model="selected[$index]">
</select>
</td>
<td>
{{getValue(1)}}
</td>
<td>
</td>
</tr>
</table>
</div>
</body>
As soon as I select some value from the dropdown (select tag) in the first column, I notice that the function in the second column is triggered? What is the reason for this? What exactly is happening behind the scenes?
The reason is you are doing it inside ng-repeat
<tr ng-repeat = 'count in counter'>
You need to pass the object on the controller, in order to do some action on the same.
{{getValue(obj)}}
i want to access period in items as options in select tag.
angular js module and list
var dynamicApp = angular.module('dynamicApp', []);
dynamicApp.controller('maincontroller', function($scope) {
$scope.invoice = {
items: [{
loyality: [{name:'points'},{name:'credits'}],
value:1,
period: [{name:'activity1'},{name:'activity2'}]
}]
};
$scope.removeItem = function(index) {
$scope.list.splice(index, 1);
}
});
html code for select tag
<td><select ng-model=" pts" ng-options="lists.items.period for lists in invoice.items " ></select></td>
Here is the HTML code:
<select ng-model="pts" ng-options="item as item.name for item in invoice.items[0].period track by $index" ></select>
and also a working example:
http://plnkr.co/edit/OZxcsMIVDs78Jbama174?p=preview
<td>
<select ng-model=" pts" ng-options="lists for lists in invoice.items.period " ></select>
</td>
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/
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.