I need repeat keys name from an object and values from another json object.
avis.name works but the score(model.score) doesn't want showing up. help
for info, im using angular-rateit directive
code look like:
$scope.model = [
{
"score": 5
},
{
"score": 3
},
{
"score": 2
}
]
$scope.allavispossible = [
{
"name": "presentation"
},
{
"name": "efficacite"
},
"name": "puissance"
]
<div ng-repeat="avis in allavispossible">
<span class="namecaracforvoteaddproduct">{{avis.name}}</span><ng-rate-it ng-model="model.score" max="5" step="1" star-width="25" star-height="25" class="bigstar" read-only="false" resetable="false"></ng-rate-it>
</div>
You need to change the array with each object having name and a score and change the ng-model as ng-model="avis.score"
DEMO
var app = angular.module('testApp',['ngRateIt']);
app.controller('testCtrl',function($scope){
$scope.allavispossible =[
{
"name": "presentation",
"score": 5
},
{
"name": "efficacite",
"score": 3
},
{
"name": "puissance",
"score": 2
}
];
});
<link href="https://github.com/akempes/angular-rateit/blob/master/dist/ng-rateit.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://raw.githubusercontent.com/jannunzi/educationPortal/master/public/js/ng-rateit.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<div ng-repeat="avis in allavispossible">
<span class="namecaracforvoteaddproduct">{{avis.name}}</span><ng-rate-it ng-model="avis.score" max="5" step="1" star-width="25" star-height="25" class="bigstar" read-only="false" resetable="false"></ng-rate-it>
</div>
You tried to use Array as Object: ng-model="model.score". But model - is Array, you need to use it as Array, f.e. ng-model="model[0].score"
Related
I am facing issue to store category SINGLES related data into an array and then use this array to display show data.Basically, I just want to store data that is only belong to category "SINGLES" from json file that I named it "data.json" into an array.Can anyone help me please. I would really appreciate that.
Index.html
<div id="app">
<div class="col-lg-4 col-sm-6" v-for="model in jsonSingleData">
<div class="beeton-models-box">
<div class="image-holder">
</div>
<div class="text-box">
<h3>{{model.title}}</h3>
<p>{{model.bedrooms}}</p>
</div>
</div>
</div>
</div>
script.js
var vm = new Vue({
el:'#app',
data:{
jsonSingleData:[]
},
created:function(){
this.fetchDataAll();
},
methods:{
fetchDataAll: function(){
var url="data.json";
axios.get(url)
.then(function(res){
res.data.models.forEach(single=>{
if(single.category=='SINGLES')
{
vm.jsonSingleData=single;
console.log(single);
}
});
});
}
The below is my json file.
data.json
{
"models": [
{
"title": "IRIS",
"project": "ABC",
"category": "SINGLES",
"bedrooms": 3
},
{
"title": "LILAC",
"project": "ABC",
"category": "DOUBLE",
"bedrooms": 4
},
{
"title": "ASTER",
"project": "ABC",
"category": "SINGLES",
"bedrooms": 4
}
]
}
Looks like your method is missing some points. Also, you are missing a } at the end.
Try this:
fetchDataAll: function(){
var vm = this;
var url="data.json";
axios.get(url)
.then(function(res){
res.data.models.forEach((single)=>{
if(single.category=='SINGLES')
{
vm.jsonSingleData.push(single);
console.log(single);
}
});
});
}
I have a custom directive that is holding an array of JavaScript objects.
The object is a little complex and lengthy but I will display something similar to point out my problem:
A JSON.stringify of this displays the following:
[
{
"Id": 1,
"Name": "John Doe",
"EMail": "john#doe.com"
},
{
"Id": 2,
"Name": "Jim Doe",
"EMail": "jim#doe.com"
},
{
"Id": 3,
"Name": "Jeff Doe",
"EMail": "jeff#doe.com"
}
]
I am further using ng-repeat to display the values in a tabular form on my HTML.
The values are coming from an API call that fetches them from a database.
I want to swap - say the entire Object with Id 1 with the entire Object with Id 3 so that during my tabular display I can see Id 3 object details first and Id 1 object details last, without breaking any functionality.
What would be the best possible solution to do this within the frontend itself?
How about just swapping them using a temp variable?
var arr = [{"Id":1,"Name":"John Doe","EMail":"john#doe.com"},
{"Id":2,"Name":"Jim Doe","EMail":"jim#doe.com"},
{"Id":3,"Name":"Jeff Doe","EMail":"jeff#doe.com"}]
var tmpObj = arr[0];
arr[0] = arr[2];
arr[2] = tmpObj;
If you want to reverse the array, use Array.prototype.reverse()
var app = angular.module("myApp", []);
app.controller("myController", function($scope) {
var arr = [
{
"Id": 1,
"Name": "John Doe",
"EMail": "john#doe.com"
},
{
"Id": 2,
"Name": "Jim Doe",
"EMail": "jim#doe.com"
},
{
"Id": 3,
"Name": "Jeff Doe",
"EMail": "jeff#doe.com"
}
];
$scope.array = arr.reverse();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myController">
<div ng-repeat="item in array">
{{item.Id}} - {{item.Name}} - {{item.EMail}}
</div>
</div>
</div>
Hi everyone I’m trying to create a form with angular-formly I have this definition:
{
"options": {
"data": {
"someData": 6
}
},
"fieldGroup": [
{
"className": "ctnStepper",
"key": "customField ",
"type": "form-section"
},
{
"className": "ctnChamp",
"key": "inputTest",
"type": "input"
}
]
}
And I want to put ng-class attribute on the inputTest field so after, the generated form would yield something like this:
<input ng-class="{ 'myClass': model. Something != somethingElse }">
I tried to do this tanks to the ngModelElAttrs but it’s hard to understand and I’m stuck here. Thank you in advance for your answer.
Augustin
I've assgned class to div, you can use as per your requirement.
ng-class="{'alert-danger':x.key=='customField', 'alert-info':x.key=='inputTest'}"
function myCtrl($scope) {
$scope.myData={
"options": {
"data": {
"someData": 6
}
},
"fieldGroup": [
{
"className": "ctnStepper",
"key": "customField",
"type": "form-section"
},
{
"className": "ctnChamp",
"key": "inputTest",
"type": "input"
}
]
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="myCtrl">
<div ng-repeat="x in myData.fieldGroup">
<div class="alert" ng-class="{'alert-danger':x.key=='customField', 'alert-info':x.key=='inputTest'}">{{x.className}}</div>
</div>
</div>
I have a select box that will not select the option that is bound to ng-model or ng-select, instead it selects the hard coded value initially but when I select another it just overriders my selection with the last item in the list. I have stripped it down to it bare minimum and still cannot see
this is my html page:
<!doctype html>
<html lang="en">
<head></head>
<body>
<div ng-app="myapp">
<div ng-controller="myController">
<select ng-model="freezeCalendar_model" ng-options="freezeCalender.calendarID as freezeCalender.name for freezeCalender in freezeCalendarList"></select>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
and this is my script.js:
var app = angular.module("myapp", ["controllers"]);
var controllers = angular.module("controllers", []);
controllers.controller('myController', function ($scope) {
$scope.freezeCalendar_model = 162;
$scope.freezeCalendarList = [{
"id": 104,
"name": "ABC"
}, {
"id": 202,
"name": "123"
}, {
"id": 121,
"name": "xyz"
}, {
"id": 224,
"name": "hello"
}, {
"id": 162,
"name": "bam"
}, {
"id": 164,
"name": "boom"
}];
});
I also Have a plnkr here
This is frustrating me a lot because I have a lot of selects working fine and I cannot understand what is wrong with this particular one.
Help would be greatly appreciated
You're not referencing the id correctly, it appears. Works fine for me after making that change.
Change:
freezeCalender.calendarID as freezeCalender.name
To:
freezeCalender.id as freezeCalender.name
I have a simple ng-repeat iterating through an array of objects.
The ng-repeat contains a ng-model input element for which I need to use a dynamic value as the array index. Probably very unclear explanation so here is the code :
<div ng-repeat="property in current_data.object_subtype.object_property_type" ng-init="set_input_state()" class="input-group ng-scope disabled">
<span class="input-group-addon">{{property.name}}</span>
<input type="text" placeholder="{{property.name}}" ng-model="current_data.properties[getIndexFromId(current_data.properties, property.object_property_type_id)].value" class="form-control" disabled="disabled">
The problem is that the input stays empty. I've tested some combinations and found this to work :
getIndexFromId(current_data.properties, property.object_property_type_id) == 0
current_data.properties[0].value gives the expected output
So somehow getIndexFromId(current_data.properties, property.object_property_type_id)is not well accepted by Angular or I made a stupid mistake somewhere ...
Does anyone know what's wrong with this?
Thanks!
[edit]
Here is a sample of the data behind all this :
{
"id": 1,
"name": "Robert Smith",
"object_subtype_id": 1,
"object_subtype": {
"id": 1,
"description": "Manager",
"object_property_type": [
{
"id": 1,
"description": "Phone number"
},
{
"id": 2,
"description": "Hair color"
},
{
"id": 3,
"description": "Nickname"
}
]
},
"properties": [
{
"id": 1,
"value": "819-583-4855",
"object_property_type_id": 1
},
{
"id": 2,
"value": "Mauves",
"object_property_type_id": 2
},
{
"id": 3,
"value": "Bob",
"object_property_type_id": 3
}
]
}
From what I've seen of Angular, the content of the attributes are not executed as javascript. It's a custom parsed and executed mini-language that doesn't support complex indexing.
With that said, its probably for the best. Any sufficiently complex logic should be handled by the controller or a service.
function MyController($scope) {
$scope.set_current_data_value = function (current_data, property) {
var index = $scope.getIndexFromId(current_data.properties, property.object_property_type_id);
current_data.properties[index].value = $scope.property_name;
}
}
Then your html would look something like:
<input type="text" placeholder="{{property.name}}" ng-model="property_name" ng-change="set_current_data_value(current_data, property)" class="form-control" disabled="disabled">
You may also be able to use ng-submit if you don't need to update your model in real time.