Why is my select ignoring my ng-model and ng-selected - javascript

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

Related

ng-repeat Values with ng-rateit

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"

Angular - Binding the following data via ng-options for a select field

Given the following code:
http://jsfiddle.net/KN9xx/1102/
Suppose I received an ajax call with the following data I pass to a scope variable:
$scope.people_model = {
"people":[
{
"id":"1",
"name":"Jon"
},
{
"id":"2",
"name":"Adam"
}
]
};
How would I work with the select box to iterate over the 'people' via ng-options?
<select
ng-options="p.name for name in people_model"
ng-model="people_model">
</select>
Change your select as ,
<select ng-model="currentSelected" ng-options="selection.id as selection.name for selection in people_model.people"></select>
You need to access the array people inside the object people_model
DEMO
var app = angular.module('myapp', []);
app.controller("FirstCtrl", ["$scope",
function($scope) {
$scope.currentSelected = "1";
$scope.people_model = {
"people": [{
"id": "1",
"name": "Jon"
}, {
"id": "2",
"name": "Adam"
}]
};
}
]);
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>To Do List</title>
<link href="skeleton.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="MainViewController.js"></script>
</head>
<body ng-controller="FirstCtrl">
<select ng-model="currentSelected" ng-options="selection.id as selection.name for selection in people_model.people"></select>
</body>
</html>

Passing Json data from Controller to View in Angular JS to build a table

Trying to get the certain fields to display, ideally in a table (headings, rows & columns). And looking for a best way find fields in a Json feed. I tried using the controller to find the fields then pass that data to the view in the HTML.
Is there something wrong in the controller with respect to the Json? the fields are empty. Seems like nothing is passed from the controller to the view ? This is what I tried:
<!doctype html>
<html ng-app="app" >
<head>
<meta charset="utf-8">
<title>LIVE</title>
<!-- <link rel="stylesheet" href="style.css"> -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('DataCtrl', function ($scope, $http) {
$scope.result = {
"data": {
"transactionList": [{
"barcode": "52905819992681",
"training": 0,
"tranNo": 1,
"userId": "8796093054980",
"retailerId": "defaultRetailer",
"storeId": "12Store",
"deviceId": "afd03463-9ee7-45d4-9d2e-8d64a683f126",
"tillId": "2",
"tranTypeId": "regularSale",
"isTranVoid": 0,
"totalItems": 1,
"merchTotal": 50.0,
"promoTotal": 0.0
}, {
"barcode": "52905819592681",
"training": 0,
"tranNo": 1,
"userId": "8796093054980",
"retailerId": "defaultRetailer",
"storeId": "23Store",
"deviceId": "afd03463-9ee7-45d4-9d2e-8d64a683f126",
"tillId": "2",
"tranTypeId": "regularSale",
"isTranVoid": 0,
"totalItems": 1,
"merchTotal": 50.0,
"promoTotal": 0.0
}]
}
}
};
$scope.elements = $scope.result.data.transactionList.map(function (res) {
var e = {};
e.transTypeId = res.transTypeId;
e.userId = res.userId;
e.storeId = res.storeId;
return e;
});
});
</script>
</head>
<body ng-controller="DataCtrl">
<h1>Live from the JSON feed</h1>
<ul>
<li ng-repeat="e in elements">
{{ e.transTypeId}}: {{ e.userId }}, {{ e.storeId }}
</li>
</ul>
</body>
</html>
You have a extra } in your $scope.result. It should be like:
$scope.result = {
"data": {
"transactionList": [{
"barcode": "52905819992681",
"training": 0,
"tranNo": 1,
"userId": "8796093054980",
"retailerId": "defaultRetailer",
"storeId": "12Store",
"deviceId": "afd03463-9ee7-45d4-9d2e-8d64a683f126",
"tillId": "2",
"tranTypeId": "regularSale",
"isTranVoid": 0,
"totalItems": 1,
"merchTotal": 50.0,
"promoTotal": 0.0
}, {
"barcode": "52905819592681",
"training": 0,
"tranNo": 1,
"userId": "8796093054980",
"retailerId": "defaultRetailer",
"storeId": "23Store",
"deviceId": "afd03463-9ee7-45d4-9d2e-8d64a683f126",
"tillId": "2",
"tranTypeId": "regularSale",
"isTranVoid": 0,
"totalItems": 1,
"merchTotal": 50.0,
"promoTotal": 0.0
}]
}
};
// get rid of this};
Here is working plunkr
Perhaps a }; too many?
Automatic indentation usually makes those kinds of errors apparent.
Have you tried to use ng-model="...", it gives you the opportunity to overwrite an attribute or to show it. You can try it with
<input type="number" ng-model="someID" disabled="disabled">
*disabled if u need readOnly on that field.
and see how it works, maybe it can help you out.
regards
I may be wrong, but you are trying to read json data directly without parsing it?
MDN JSON.parse()
Also it would be nice if you upload your code on something like http://jsfiddle.net
This way people can test it out.

ng-options nested in ng-repeat

I'm having the angular feature issue where my select list has an empty first option, but this situation is a little different from the research I've done online. When I place the select tag outside of the ng-repeat, there is no blank option as the default selected value. When I place the select tag using the ng-option attribute within the ng-repeat, I have the blank issue. I've tried setting the default value for the ng-model attribute on the select tag with no luck. Here is the html fragment:
<tr ng-repeat="item in todo.items">
<td>{{item.project}}</td>
<td>{{item.action}}</td>
<td>
<select ng-model="ttdSelect" ng-change="moveItem(item.id, ttdSelect);" ng-options="option.name for option in todo.options track by option.name">
</select>
</td>
</tr>
javascript:
var items = [{"id" : 1, "name" : "ttd" , "action" : "do it"}];
var selectOptions = [{ "name" : "next", "value" : "nextUp"},
{ "name" : "in progress", "value" : "inProgress"},
{ "name" : "waiting", "value" : "waiting"},
{ "name" : "done", "value" : "done"},
{ "name" : "trash", "value" : "trash"}];
app.controller("appController", function ($scope)
{
$scope.todo.items = items;
$scope.todo.options = selectOptions;
}
Similar to the answer of jusopi but here in a SO snippet:
var app = angular.module('myApp', []);
var items = [{
"id": 1,
"name": "ttd",
"action": "do it"
},
{
"id": 2,
"name": "zzz",
"action": "do it 2"
}];
var selectOptions = [{
"name": "next",
"value": "nextUp"
}, {
"name": "in progress",
"value": "inProgress"
}, {
"name": "waiting",
"value": "waiting"
}, {
"name": "done",
"value": "done"
}, {
"name": "trash",
"value": "trash"
}];
app.controller("appController", function($scope) {
$scope.todo = {};
$scope.todo.items = items;
$scope.todo.options = selectOptions;
angular.forEach($scope.todo.items, function(item, key) {
item.ttdSelect = $scope.todo.options[0];
});
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="appController">
<div>
<table class="table">
<tr ng-repeat="item in todo.items">
<td>{{item.project}}</td>
<td>{{item.action}}</td>
<td>
<select ng-model="item.ttdSelect"
ng-change="moveItem(item.id, item.ttdSelect);"
ng-options="option.name for option in todo.options track by option.name">
</select>
</td>
</tr>
</table>
<b>Trace:</b>
<pre>
items = {{todo.items | json}}
</pre>
<pre>
options = {{todo.options | json}}
</pre>
</div>
</body>
</html>
I had a hard time following what exactly it is that you wanted so I tried to do it the way I'd normally tackle a problem like this.
example - http://codepen.io/jusopi/pen/PZzxPY
There are a few problems I addressed in reworking your code:
ttdSelect was not pointing to anything in your code. I assumed you meant to update the status value of the todo item so I assigned it to item.status
I created a status option to match a falsy value when a todo item doesn't have a current status
I demonstrated that you can actually bypass ng-options on the <select> and instead use ng-repeat on the <option> element instead to make it a little easier to read.
I hope this helps. Keep in mind I did this in jade/coffeescript because I work faster and better that way. You can easily see the compiled html/js if you need to.

Use Angular with HTML5

I'm taking tutorial in CodeSchool about angular and I try to create my own experiment in html5 and angular new version in vs2012.
I try to test angular repeat but the problem is HTML5 can't render my angular.
When I try to run my page, the repeater only show the angular statement {{item.name}}:{{item.quantity}} not the result. Why? -"show code below"
Angular script :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
application.js :
<script type="text/javascript" src="Scripts/application.js"></script>
$(function () {
var app = angular.module('zaskarCorp', []);
app.controller('kirito', function ($scope) {
$scope.items = [{
"name": "dual sword",
"quantity": 2
}, {
"name": "gun",
"quantity": 1
}, {
"name": "laser sword",
"quantity": 1
}];
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="zaskarCorp">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script type="text/javascript" src="Scripts/application.js"></script>
</head>
<body data-ng-controller="kirito">
<ul>
<li data-ng-repeat="item in items">
<span>{{item.name}}:{{item.quantity}}</span>
</li>
</ul>
</body>
</html>
As you can see I add data- in my angular because I use html5. -"I hate warnings"
Your code has a number of typos and errors:
funtion instead of function
agular instead of angular
no jQuery included, but you call $(function(){...})
Here's a plunker with your code working.
Also, for future reference, if you remove .min from the angular source, it makes it easier to debug.
Please add this directive to your body tag:
data-ng-app="zaskarCorp"
Also, you have some misspellings in your javascript code.
Without using jQLite your code will look like this:
var app = angular.module('zaskarCorp', []);
app.controller('kirito', function ($scope) {
$scope.items = [
{
"name": "dual sword",
"quantity": 2
},
{
"name": "gun",
"quantity": 1
},
{
"name": "laser sword",
"quantity": 1
}];
});
Full code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="zaskarCorp">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script>
var app = angular.module('zaskarCorp', []);
app.controller('kirito', function($scope) {
$scope.items = [{
"name": "dual sword",
"quantity": 2
}, {
"name": "gun",
"quantity": 1
}, {
"name": "laser sword",
"quantity": 1
}];
});
</script>
</head>
<body data-ng-controller="kirito">
<ul>
<li data-ng-repeat="item in items">
<span>{{item.name}}:{{item.quantity}}</span>
</li>
</ul>
</body>
</html>

Categories

Resources