Question
I want to retrieve multiple data from a view and store it into a key:value array in the controller.
HTML
<div ng-repeat="element in elements">
<input type="number" id = "{{element.id}}">
</div>
The array should contain element.id as the key and the value of the input as the value.
I checked angular docs but not found anything helpful to perform this task.
Thanks in advance !
Related
I'm trying to show the name of the variable in my website written with AngularJS.
for example:
Backend code:
$scope.Bundles = {
Bundle1:["Sensor1","Sensor2"],
Bundle2:["Sensor1","Sensor2","Sensor3"],
Bundle3:["Sensor1","Sensor2","Sensor3","Sensor4"]
}
Frontend code:
<label ng-repeat="name in Bundles">
<div> *Want to show "Bundle#" (name), instead of it's value (the sensors)* </div>
</label>
Some notes:
From google searches, I always find people asking how to show the value of the variable, {{name}}, I know that, haven't found anything like the question im asking here
I need it because later in the code I will need to do a ng-repeat with "sensor in name" to show the sensors separately, so I really need a concrete solution and not a dirty one with another array holding the names.
Thank you.
You can access both the key and value using:
<label ng-repeat="(key, value) in Bundles">
<div> *Want to show {{ key }}, instead of it's value {{ value }} (the sensors)* </div>
</label>
You can use the tuple returned by the ng-repeat as stated in the docs https://docs.angularjs.org/api/ng/directive/ngRepeat
<label ng-repeat="(key,value) in Bundles">
You can use javascipt Object.keys(arr) to get all the keys and then iterate to the keys using ng-repeat.
$scope.BundleNumbers = Object.keys($scope.Bundles)
$scope.BundleNumbers will have ["Bundle1", "Bundle2", "Bundle3"]
<label ng-repeat="name in BundleNumbers">
{{name}}
</label>
The other and efficient/angular way to do is :
<label ng-repeat="(key,value) in Bundles">{{key}} </label>
Reference links:
Angular JS ng Repeat
JavaScript Object keys
I have a kendo multi select widget in my template, the code for which is given below.
<div ng-repeat="program in user.programs">
<label class="label-multi">{{program.name}}:</label>
<select kendo-multi-select="" k-option-label="'Select Services...'" k-data-text-field="'name'" k-data-value-field="'id'" k-data-source="services" k-ng-model="selectedServices" >
</select>
</div>
Each user has several programs, and each program has some services. Now I want to show the services that are already associated with the program i.e selectedServices which I initialize in my controller like so:
$scope.selectedServices = ["S1","S2"];
But the problem is that selectedServices vary for each program. I was thinking about doing something like selectedServices[0], selectedServices[1] and so on using $index. How do I achieve this and how do assign values to these selectedServices in my controller? Wouldn't it be an array of arrays?
Why don't you add a selectedServices array to user.programs?
For example:
$scope.user.programs.selectedServices = ["S1", "S2"];
I've got a pretty deeply nested JSON object being returned from an $http call, using Angular. In my template, I have to nest a few ng-repeats to get present the data. I can't seem to figure out how to bind the data using ng-model on a text input.
I read this question which said that the return object isn't automatically data in the $scope, and you have to loop through the data and instantiate the structure. I tried that as well with the same outcome.
// Seemingly unnecessary code
angular.forEach(Object.keys($scope.sources), function(sourcename){
$scope.sourceData[sourcename] = {};
angular.forEach(Object.keys($scope.sources[sourcename]), function(key){
$scope.sourceData[sourcename][key] = $scope.sources[sourcename][key];
});
Here's a fiddle showing my attempts:
http://jsfiddle.net/c7z9C/2/
I just want the values to be populated in the fields and bound to the model. Thanks in advance for any advice.
The HTML in your example was just a little off.
Here is a working fiddle.
The "not working" input just has some code in the ng-model that wasn't working.
First off, you don't need to interpolate {{ }} inside Angular directive attributes. So, this includes ng-model. So the {{key}} isn't necessary.
Also, sourceData was misspelled. It was supposed to be sourcedata and case matters.
So the end result for the ng-model is ng-model="sourcedata[key]":
<li ng-repeat="(key,value) in sourcedata">
WORKS: <input type="text" value="{{value}}" /><br/>
DOESN'T: <input type="text" ng-model="sourcedata[key]" />
</li>
I have a simple html that loads JSON data into a table using Angularjs ng-repeat. One of the fields come as 1 or zero. I want to write a simple AngularJs directive that will show check-boxes as either checked(1) or not (0); and show text success against (1) and failure against(0) rows.
I'm starting with angular, you can use ng-model inside your ng-repeat and ng-if to display to decode value inside the loop.
Code:
<div ng-controller="Ctrl">
<div ng-repeat="o in obj">{{o.id}}
<input type="checkbox" ng-model="o.checked">
<div ng-if="o.checked == true">success</div>
<div ng-if="o.checked != true">fail!</div>
</div>
</div>
Demo: http://jsfiddle.net/IrvinDominin/G9m4H/
I'm having trouble trying to dynamically display all o the json values in angular using ng-repat
here what what I'am hoping to replacate using hard coded values
html
<div ng-repeat="user in users">
{{user.userId}} {{user.userName}} {{user.password}}
</div>
output
3 DAve password
4 bob password
4 kjdjkdj
1 names password2
I'm trying to write the angular repeat to be more generic so I can pass i any amount of json gather from a mongoose model. So far I've gotten
<div ng-repeat="(key, value) in users">
<td> {{key}} </td> <td> {{ value }} </td>
</div>
With this loop I'm getting too much information with an output that follows
0 {"_id":"527a732fe5f8dabf5b00020c","userId":3,"userName":"DAve","password":"password"}
1 {"userId":4,"userName":"bob","password":"password","_id":"527abf6ebaa5eb8426000001","__v":0}
2 {"userId":4,"password":"kjdjkdj","_id":"527d62fc85612ab42b000001","__v":0}
3 {"__v":0,"_id":"528130182c5544b81f000002","password":"password2","userId":1,"userName":"names"}
how can i modify the following loop to output only the userName password and userId without having to explicitly declare them like in my first loop.
If you want to print all values, within user without knowing what or how many there are ahead of time you could use a second ng-repeat to iterate over the key value pairs of each object as such:
<div ng-repeat="user in users">
<div ng-repeat="(k, v) in user">
{{v}}
</div>
</div>
This only prints the values since it looks like that's the part you're interested in. Clearly you could print both.