I would like to bind my array of json data to angularjs checkbox. I am newbiew to this technology so I couldn't figure out the exact way to solve my scenario. I have json data like below
{
"hits":{
"total":3695,
"hits":[
{
"_type":"School",
"_source":{
"message":[
"HIGH"
],
"Class":"A"
}
},
{
"_type":"School",
"_source":{
"message":[
"HIGH"
],
"Class":"B"
}
},
{
"_type":"School",
"_source":{
"message":[
"HIGH"
],
"Class":"C"
}
}
]
}
}
I have to bind the "Class" value in the angularjs checkbox.
The angularjs code which I have wrote is ,
$scope.listofschoolname = response;
<label ng-repeat="ModelName in listofschoolname ">
<input type="checkbox" ng-model="ModelName.checked" size="10" /> {{ModelName.hits.hits[0]._source.Class}}
</label>
I can get a single checkbox with value "A". Like that I would like to bind all the value in Class to checkbox.
Note: The json response which I am getting is dynamic in nature sometimes it have 10 class value(A,B,C,D,E,etc) sometimes it have only one class value(A) based on that my checkbox count and value should change.
Thanks in advance..
If I understand you correctly then you need to iterate over listofschoolname.hits.hits
$scope.listofschoolname = response;
<label ng-repeat="ModelName in listofschoolname.hits.hits ">
<input type="checkbox" ng-model="ModelName.checked" size="10"/> {{ModelName._source.Class}}
</label>
Related
Hi please i'm looking for a way to replace : name="variant[attribute][]" by v-model=""
<input type="text" class="form-control form-control-sm" name="variant[attribute][]" placeholder="Color">
i mean create a multi dementional array but with v-model not name attribute
this is my vue.js data code :
data () {
return {
tags: []
}
}
In Angularjs I am trying to search in json data which i am using in html template. My input json data is as below,
var data = JSON.parse(
'{
"Project": {
"_attributes": {
"gui": "ProjectGui",
"prjname": "MyProject"
},
"stringarr": [
{
"_attributes": {
"name": "Project.comments"
},
"_text": "MyComments"
},
{
"_attributes": {
"name": "Project.classpath"
},
"_text": "D:\\Project\\bin\\config.jar"
}
]
}
}'
);
And i am using this for displaying and editing name in my html template, which is working fine. When I edit input box , it reflects the changes in json data as well, that's exactly I want.
Name: <input type="text" ng-model="data.Project._attributes.prjname"><br>
But I also want to display and edit comments in same way but not getting idea how to achieve this. The difference is, I have to search within json data where data.Project.stringProp[i]._attributes.name is "Project.comments" and take "_text" as input for displaying & editing. I have tried following that is not working.
Comments: <input type="text" ng-repeat="x in data.Project.stringProp" ng-model="x">{{x._text}}<br>
Please suggest , what would be the best possible way to do this. I think it can be done using a get function and ng-change function but that approach will be lengthy and may put performance overheads.
Thanks
You can either implement a filter for filter _text value if the name is 'Project.comments', or you can simply add an ng-if statement.
Comments: <input type="text" ng-repeat="x in data.Project.stringarr" ng-if="x._attributes.name == 'Project.comments'">{{x._text}}<br>
I have resolved this by using ng-repeat and ng-if for specified condition.
<body ng-controller="Controller">
Name: <input type="text" ng-model="data[0].Project._attributes.prjname"><br>
check: <div ng-repeat="x in data[0].Project.stringarr" ng-if="x._attributes.name == 'Project.comments'">{{x._text}}</div><br><br>
comments : <input type="text" ng-repeat="x in data[0].Project.stringarr" ng-if="x._attributes.name == 'Project.comments'" ng-model="x._text"><br>
</body>
Please find the following plunkr
https://plnkr.co/edit/3jUaw73cHgAtbBZr8LuJ?p=preview
Values of selected row in ng-repeate get populated in a form below it. to accomplish this i am doing a simple thing
<p ng-repeat="item in array" ng-click="SetCurrVariable(item)">
{{item.ThresholdSet}}
</p>
in the controller i have a function
$scope.array = [
{ ThresholdSet: false },
{ ThresholdSet: false },
{ ThresholdSet: false }
];
$scope.SetCurrVariable = function (variable) {
$scope.CurrVariable = variable;
};
form have a check-box that i bind to a property of CurrVariable
<input id="chkThr" type="checkbox" ng-model="CurrVariable.ThresholdSet">
i am trying to achieve this behavior that if i click the check-Box in the form. The change gets visible in ng-repeate like a two way binding.
Plunkr setup
Updated with $scope
$scope.SetCurrVariable = function (variable) {
$scope.CurrVariable = variable;
};
Use this code in your controller, then the two-way binding should work
I have some nested ng-repeats I am working with and the third level down is a grouping of checkboxes. Initially I am sent an array of options for the checkboxes so I do this:
<div class="fadingOptionsHere" ng-repeat="fading in fade.options">
<input type="checkbox" ng-model="fadingsHere" value="{{fading.id}}">{{fading.name}}
</div>
I am tyring to find a way to ONLY get the values of the selected checkboxes back. It would be super ideal if I could just replace the nested options array with an array of only the selected items, so I could just send the json object back like that.
This is the third level down of nesting so I'm having trouble tracking these guys. How would I be able to get only the selected values (as the fading.id) of the select boxes for each iteration of the ng-repeat?
I keep trying to reference the fadingsHere model with no success.
Thanks!
You can do this in this way.
In HTML do like below.
<ul>
<li data-ng-repeat="record in records">
<input type="checkbox" ng-model="selected[record.Id]"> {{record.Id}}
</li>
</ul>
And in controller you have to add selected property.
function MyCtrl($scope) {
$scope.records = [ { "Id": 1, }, { "Id": 2 }, { "Id": 3 } ];
$scope.selected = {};
$scope.ShowSelected = function() {
return $scope.selected
};
When you read the selected property you will get the selected list.
Demo
you could use checklist model directive like
<input type="checkbox" class="form-control"
checklist-model="transaction.jobData[attribute.key]"
checklist-value="checkBoxAttributes.code">
I want to do something like this
<input type="checkbox" ng-model="first" ng-click="chkSelect()"/><label>First</label>
<input type="checkbox" ng-model="second" ng-click="chkSelect()"/><label>Second</label>
<input type="checkbox" ng-model="third" ng-click="chkSelect()"/><label>Third</label>
<input type="checkbox" ng-model="forth" ng-click="chkSelect()"/><label>Forth</label>
<button>Selected</button>
On button click I want to display selected checkbox labelname.
$scope.chkSelect = function (value) {
console.log(value);
};
Because the checkboxes are mapped, you can reference $scope.first, $scope.second, etc in your chkSelect() function. It's also possible to have a set of checkboxes mapped as a single array of data instead of having to give each checkbox a name. This is handy if you are generating the checkboxes, perhaps from a set of data.
I agree with Bublebee Mans solution. You've left out a lot of detail on why you're trying to get the label. In any case if you REALLY want to get it you can do this:
$scope.chkSelect = function (value) {
for(var key in $scope){
var inputs = document.querySelectorAll("input[ng-model='" + key + "']");
if(inputs.length){
var selectedInput = inputs[0];
var label = selectedInput.nextSibling;
console.log(label.innerHTML);
}
};
};
You can mess around with it to see if it's indeed selected.
fiddle: http://jsfiddle.net/pzz6s/
Side note, for anybody who knows angular please forgive me.
If you are dealing with server data, you might need isolated html block and deal with data in controller only.
You can do it by creating array in controller, maybe your data from response, and use ngRepeat directive to deal independently in html code.
Here is what I am telling you:
HTML:
<form ng-controller="MyCtrl">
<label ng-repeat="name in names" for="{{name}}">
{{name}}
<input type="checkbox"
ng-model="my[name]"
id="{{name}}"
name="favorite" />
</label>
<div>You chose <label ng-repeat="(key, value) in my">
<span ng-show="value == true">{{key}}<span>
</label>
</div>
</form>
Javascript
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.names = ['pizza', 'unicorns', 'robots'];
$scope.my = { };
}
You want to have something like the following in your controller (untested, working from memory):
$scope.checkBoxModels = [ { name: 'first', checked: false }, { name: 'second', checked: false }, { name: 'third', checked: false }, { name: 'fourth', checked: false } ];
Then in your view:
<input ng-repeat"checkboxModel in CheckBoxModels" ng-model="checkBoxModel.checked" ng-click="chkSelect(checkBoxModel)" /><label>{{checkBoxModel.name}}</label>
Then update your function:
$scope.chkSelect = function (checkBoxModel) {
console.log(checkBoxModel.name);
};