We Keep Coding

Limit select option with another select with angularjs

My object from database is coming like this:
[
{
"id": 8,
"concessionaria": {
"id": 1,
"nome": "asda"
},
"plano": {
"id": 1,
"sigla": "B3",
"nome": "tetes"
},
"descricao": "45987",
"enable": true
},
{
"id": 7,
"concessionaria": {
"id": 2,
"nome": "teste2"
},
"plano": {
"id": 3,
"sigla": "b4",
"nome": "Teste 2"
},
"descricao": "qweqwe",
"enable": true
},
{
"id": 6,
"concessionaria": {
"id": 2,
"nome": "teste2",
"estado": "ES"
},
"plano": {
"id": 2,
"sigla": "B3",
"nome": "Consumidores"
},
"descricao": "werwerw",
"enable": true
}
]
And i need to show two select, to choose the "concessionaria" and then the "planos" it has.
How can i do it since the "concessionaria" comes multiple times as the "plano" changes?

You have to create new model.
This sample show to you how can convert or create new model to get the concessionaria and plano as array to make them as select option
var app = angular.module("app", []);
app.controller("ctrl", [
"$scope",
function($scope) {
var json = [{
"id": 8,
"concessionaria": {
"id": 1,
"nome": "asda"
},
"plano": {
"id": 1,
"sigla": "B3",
"nome": "tetes"
},
"descricao": "45987",
"enable": true
},
{
"id": 7,
"concessionaria": {
"id": 2,
"nome": "teste2"
},
"plano": {
"id": 3,
"sigla": "b4",
"nome": "Teste 2"
},
"descricao": "qweqwe",
"enable": true
},
{
"id": 6,
"concessionaria": {
"id": 2,
"nome": "teste2",
"estado": "ES"
},
"plano": {
"id": 2,
"sigla": "B3",
"nome": "Consumidores"
},
"descricao": "werwerw",
"enable": true
}
];
$scope.model = {
concessionaria: [],
plano: []
};
angular.forEach(json, function(item) {
var concessionaria = item.concessionaria;
var plano = item.plano;
$scope.model.concessionaria.push(concessionaria);
$scope.model.plano.push(plano);
});
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<label>concessionaria</label>
<select ng-model="form.concessionaria" ng-options="item as item.nome for item in model.concessionaria"></select> {{form.concessionaria}}
<hr />
<label>plano</label>
<select ng-model="form.plano" ng-options="item as item.nome for item in model.plano"></select> {{form.plano}}
</div>

You can use limitTo filter.
For example: ng-repeat="item in items | limitTo 2"
For more informations: https://www.w3schools.com/angular/ng_filter_limitto.asp

You will need two selects, populate the first select with distinct values of concessionaria, and once user select a value from the first select you will have the id of concessionaria, then depending on that value you can populate the second select box with different plano. So if user selects a concessionaria with id 2 your second select box will be populated with two plano (one with plano id 2 and other with plano id 3)

How to Accessing fields from custom search results in netsuite?

In the ui, I have created a custom transaction search with vendor lines. How do I access vendor lines values? I have something like this:
var veResults = vendorSearch.run().getRange({
start: 0,
end: 50
});
for(var i = 0; i < veResults.length; i++)
{
var vendorName = veResults[i].getValue({name: 'vendorLine.entityid');
context.response.write(vendorName);
};
If I print veResults, I get the following json:
[
{
"recordType": "vendorpayment",
"id": "210",
"values": {
"employee.entityid": "",
"trandate": "5/20/2015",
"print": "Print",
"type": [
{
"value": "VendPymt",
"text": "Bill Payment"
}
],
"payrollbatch": "",
"tranid": "2009",
"entity": [
{
"value": "35",
"text": "Pacific Bell Telephone"
}
],
"account": [
{
"value": "1",
"text": "1000 Checking"
}
],
"otherrefnum": "",
"statusref": [],
"trackingnumbers": "",
"memo": "",
"currency": [
{
"value": "1",
"text": "USA"
}
],
"expectedreceiptdate": "",
"trandate_1": "5/20/2015",
"enddate": "",
"item": [],
"vendorLine.entityid": "Pacific Bell Telephone",
"vendorLine.billaddress": "Pacific Bell Telephone\nPacific Bell Payment Center\nSacramento CA 95887-0001\nUS"
}
...]
So, the value is there, how do I get it? The search object has only getValue and getText methods, none of which work in this case.

There is a syntax error with this line
var vendorName = veResults[i].getValue({'vendorLine.entityid');
It should be
var vendorName = veResults[i].getValue('vendorLine.entityid');

How to control the view based on the value selected from drop down in AngularJs?

My Json data is :
[{
"objective": "My obj",
"score": 9,
"status": "active",
"quarter": "Q1",
"year": "2015",
"team": "A",
"owner_ids": [
"175323"
],
"key_results": [{
"result": "resut11",
"status": "Pending"
}, {
"result": "result12",
"status": "On time"
}]
}, {
"objective": "My second obj",
"score": 5,
"status": "active",
"quarter": "Q2",
"year": "2015",
"team": "B",
"owner_ids": [
"175223"
],
"key_results": [{
"result": "resut21",
"status": "Pending"
}, {
"result": "result22",
"status": "On time"
}]
}, {
"objective": "My third objective",
"score": 3,
"status": "active",
"quarter": "Q3",
"year": "2015",
"team": "C",
"owner_ids": [
"15323"
],
"key_results": [{
"result": "resut31",
"status": "Pending"
}, {
"result": "result12",
"status": "Pending"
}]
}, {
"objective": "My fourth objective",
"score": 3,
"status": "active",
"quarter": "Q2",
"year": "2015",
"team": "A",
"owner_ids": [
"17598"
],
"key_results": [{
"result": "resut41",
"status": "Pending"
}, {
"result": "result42",
"status": "On time"
}]
}, {
"objective": "My fifth objective",
"score": 5,
"status": "active",
"quarter": "Q3",
"year": "2016",
"team": "B",
"owner_ids": [
"13298"
],
"key_results": [{
"result": "resut51",
"status": "Pending"
}, {
"result": "result52",
"status": "On time"
}]
}, {
"objective": "My sixth objective",
"score": 7,
"status": "active",
"quarter": "Q4",
"year": "2015",
"team": "B",
"owner_ids": [
"1328"
],
"key_results": [{
"result": "resut61",
"status": "Pending"
}, {
"result": "result62",
"status": "On time"
}]
}, {
"objective": "My seventh objective",
"score": 7,
"status": "active",
"quarter": "Q3",
"year": "2015",
"team": "B",
"owner_ids": [
"1328"
],
"key_results": [{
"result": "resut71",
"status": "Pending"
}, {
"result": "result72",
"status": "On time"
}]
}]
In my view I am displaying the data in table as well as calculating the average of the final score.
I am able to display and average all the data, Now I need to filter teh data based on the year and then quarter.
View Page :
<h3>Overall Score: {{calculateAverage(xyz)}}</h3>
<tbody>
<tr ng-repeat="entries in xyz">
<td>{{$index + 1}} </td>
<td>{{entries.objective}}</td>
<td>{{entries.key_results[0].result}}</td>
<td ng-class="{'text-success': entries.key_results[0].status == 'Pending', 'text-danger': entries.key_results[0].status == 'On time' }">
{{entries.key_results[0].status}}
</td>
<td>{{entries.final_score}}</td>
<td>{{entries.owner_ids[0]}}</td>
<td>
<a class="btn btn-sm btn-success" ng-click="/#/mypage/{{entries.owner_ids[0]}}"> View It </a>
</td>
</tr>
</tbody>
controller:
$scope.xyz = myservice.query();
$scope.calculateAverage = function (MyData) {
//console.log(MyData);
var sum = 0;
for (var i = 0; i < MyData.length; i++) {
var sum = sum + MyData[i].final_score;
}
var avg = sum / (MyData.length);
//console.log(avg);
return avg.toFixed(2);
};
There are other displays based on this over all data.
I have Implemented the drop down box
<div class="col-lg-3">
<h4>Year:</h4>
<select class="form-control" id="sel1" style="max-width:150px; margin-top:19px">
<option>2015</option>
</select>
</div>
<div class="col-lg-3">
<h4>Quarter:</h4>
<select class="form-control" id="sel1" style="max-width:150px; margin-top:19px">
<option>Q3</option>
<options>Q4</options>
</select>
</div>
It should display the distinct year as well as distinct month and on selection can it filter the json data and can the rest of the view be changed which is based on this overall data depending of the selected value from drop down?
Like changing the quarter to Q3 or year to 2015, the display in table and the average also changes accordingly , there are many dependent in view page on the overall data, this filter is just introduced, I do not want to change the various functions if the data scope can be changed based on dropdown select, looking for approach to accomplish this?

You can use Angular's filters to filter your data. You can also store your filtered results in scope variable and your original data remains intact. You need to add models to the select elements you are using as filters as shown:
<div class="col-lg-3">
<h4>Year:</h4>
<select class="form-control" id="sel1" style="max-width:150px; margin-top:19px" ng-model="yearFilter">
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</div>
<div class="col-lg-3">
<h4>Quarter:</h4>
<select class="form-control" id="sel1" style="max-width:150px; margin-top:19px" ng-model="quarterFilter">
<option value="Q3">Q3</option>
<option value="Q4">Q4</option>
</select>
</div>
The filters should be applied as shown:
<tr ng-repeat="entries in filteredObjects=(xyz|filter:{'year':yearFilter,'quarter':quarterFilter})">
Now you can use the filteredObjects scope variable anywhere in that controller and will contain only the filtered data, without changing your original data. Check out one simple example implementation based off of your code in this jsFiddle.

angular Filtering table with dynamic columns ng-model not getting set

Im trying to create an app that will build the table columns and rows dynamically im stuck when I try to filter. It seems like the ng-model im trying to set is not getting set.
fiddle: http://jsfiddle.net/v6ruo7mj/49/
var myApp = angular.module('myApp',[]);
myApp.filter('test',function(){
return function(input,other){
console.log(other);
console.log(input);
return input;
}
});
myApp.controller('MyCtrl', ['$scope', function($scope) {
$scope.rows = [
{
"branch": "default",
"comment": "",
"name": "20141228.150706",
"score": "0.45000",
"time": "0.02"
},
{
"branch": "default",
"comment": "",
"name": "20141226.022147",
"score": "0.56000",
"time": "6.00"
},
{
"branch": "default",
"comment": "",
"name": "20141226.022112",
"score": "0.56000",
"time": "3.00"
},
{
"branch": "default",
"comment": "",
"name": "20141226.021955",
"score": "0.55000",
"time": "3.00"
},
{
"branch": "default",
"comment": "",
"name": "20141226.021920",
"score": "0.49000",
"time": "10.00"
}];
$scope.cols = Object.keys($scope.rows[0]);
}]);
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<table border="1">
<tr>
<th ng-repeat="column in cols"><input ng-model="search[column]" placeholder="{{column}}" type="text"></th>
</tr>
<tr ng-repeat="row in rows |filter:search">
<td ng-repeat="column in cols ">{{row[column]}}</td>
</tr>
</table>
<pre>{{search | json}}</pre>
</div>
</div>

Looks like you're missing
$scope.search = {};
Try this: jsFiddle
Full code:
var myApp = angular.module('myApp',[]);
myApp.filter('test',function(){
return function(input,other){
console.log(other);
console.log(input);
return input;
}
});
myApp.controller('MyCtrl', ['$scope', function($scope) {
$scope.search = {};
$scope.rows = [{
"branch": "default",
"comment": "",
"name": "20141228.150706",
"score": "0.45000",
"time": "0.02"
},
{
"branch": "default",
"comment": "",
"name": "20141226.022147",
"score": "0.56000",
"time": "6.00"
},
{
"branch": "default",
"comment": "",
"name": "20141226.022112",
"score": "0.56000",
"time": "3.00"
},
{
"branch": "default",
"comment": "",
"name": "20141226.021955",
"score": "0.55000",
"time": "3.00"
},
{
"branch": "default",
"comment": "",
"name": "20141226.021920",
"score": "0.49000",
"time": "10.00"
}];
$scope.cols = Object.keys($scope.rows[0]);
}]);
HTML:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<table border="1">
<tr>
<th ng-repeat="column in cols"><input ng-model="search[column]" placeholder="{{column}}" type="text"></th>
</tr>
<tr ng-repeat="row in rows |filter:search">
<td ng-repeat="column in cols ">{{row[column]}}</td>
</tr>
</table>
<pre>{{search | json}}</pre>
</div>
</div>

Dynamic search Demo
Angularjs using to dynamic filter logic

Json Data Handling using AngularJS

I have a new case, where I need help. I want to have 9 buttons and a panel that displays the movie details, depending on which one has been clicked. So say if I clicked 'Transformers', the transformers detail should appear in the panel. Then if I were to click 'Fury', the panel detail would change to the Fury details. I need this data to be in a JSON file. I've looked, how to do this and struggle to understand how I would go about doing this. Here's what I've got so far.
JS:
var app = angular.module("myApp", []);
app.controller('MainController', ['$scope', function ($scope) {
}])
JSON:
{
"movie": [
{
"id": 1,
"name": "Star Wars The Phantom Menace",
"format": "DVD",
"rate": 4,
"price": 2
},
{
"id": 2,
"name": "Star Wars A New Hope",
"format": "DVD",
"rate": 6,
"price": 4
},
{
"id": 3,
"name": "Transformers",
"format": "Blu-Ray",
"rate": 7,
"price": 3
},
{
"id": 4,
"name": "Transformers Dark of the Moon",
"format": "Blu-Ray",
"rate": 6,
"price": 5
}
]}
HTML:
<body ng-controller="MainController" ng-app="myApp">
<h1 style="text-align:center">Garrett's Rentals</h1>
<div ng-repeat="movie in movies">
<button>{{movie.name}}</button>
</div>
<div class="panel">
<h3>You have selected:</h3>
<p>{{movie.name}}</p>
<p>{{movie.format}}</p>
<p>{{movie.rate}}</p>
<p>{{movie.price}}</p>
</div>
</body>

use
var app = angular.module("myApp", []);
app.controller('MainController', ['$scope', function ($scope) {
var json={
"movie": [
{
"id": 1,
"name": "Star Wars The Phantom Menace",
"format": "DVD",
"rate": 4,
"price": 2
},
{
"id": 2,
"name": "Star Wars A New Hope",
"format": "DVD",
"rate": 6,
"price": 4
},
{
"id": 3,
"name": "Transformers",
"format": "Blu-Ray",
"rate": 7,
"price": 3
},
{
"id": 4,
"name": "Transformers Dark of the Moon",
"format": "Blu-Ray",
"rate": 6,
"price": 5
}
]};
console.log(json);
$scope.movies=json.movie;
console.log($scope.movie);
}]);
HTML
<body ng-controller="MainController" ng-app="myApp">
<h1 style="text-align:center">Garrett's Rentals</h1>
<div ng-repeat="movie in movies">
<button>{{movie.name}}</button>
</div>
<div class="panel">
<h3>You have selected:</h3>
<p>{{movie.name}}</p>
<p>{{movie.format}}</p>
<p>{{movie.rate}}</p>
<p>{{movie.price}}</p>
</div>
</body>
Fiddle for support:http://jsfiddle.net/sXkjc/993/

Use ng-click directive on button to set current selected movie like follwing.
var app = angular.module("myApp", []);
app.controller('MainController', ['$scope', function ($scope) {
$scope.movies= movies; //here movies is your json object
$scope.selectedMovie=$scope.movies[0]; // assume that first movie is selected default
}])
HTML
<div ng-repeat="movie in movies">
<button ng-click="selectedMovie=movie">{{movie.name}}</button>
</div>
<div class="panel">
<h3>You have selected:</h3>
<p>{{selectedMovie.name}}</p>
<p>{{selectedMovie.format}}</p>
<p>{{selectedMovie.rate}}</p>
<p>{{selectedMovie.price}}</p>
</div>

JS
angular.module('myApp', [])
.controller('MainController',['$scope','$http',function($scope,$http){
$scope.contents=null;
$http.get('URL TO JSON').then(function(resp){
console.log('Success', resp);
$scope.contents=resp.data;
},
function(err){
console.error('ERR',err);
})
}]);
HTML
<body ng-controller="MainController" ng-app="myApp">
<h1 style="text-align:center">Garrett's Rentals</h1>
<div ng-repeat="movie in movies">
<button>{{movie.name}}</button>
</div>
<div class="panel">
<h3>You have selected:</h3>
<p>{{movie.name}}</p>
<p>{{movie.format}}</p>
<p>{{movie.rate}}</p>
<p>{{movie.price}}</p>
</div>

Controller Code:
var app = angular.module("myApp", []);
app.controller('MainController', ['$scope', function ($scope) {
$scope.movies = {
movie: [
{
id: 1,
name: "Star Wars The Phantom Menace",
format: "DVD",
rate: 4,
price: 2
},
{
id: 2,
name: "Star Wars A New Hope",
format: "DVD",
rate: 6,
price: 4
},
{
id: 3,
name: "Transformers",
format: "Blu-Ray",
rate: 7,
price: 3
},
{
id: 4,
name: "Transformers Dark of the Moon",
format: "Blu-Ray",
rate: 6,
price: 5
}
]}
$scope.setMovie = function(movie) {
$scope.currentMovie = movie;
}
}])
HTML:
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainController" >
<h1 style="text-align:center">Garrett's Rentals</h1>
<div ng-repeat="movie in movies.movie">
<button ng-click = "setMovie(movie)">{{movie.name}}</button>
</div>
<div class="panel">
<h3>You have selected:</h3>
<p>{{currentMovie.name}}</p>
<p>{{currentMovie.format}}</p>
<p>{{currentMovie.rate}}</p>
<p>{{currentMovie.price}}</p>
</div>
</body>
</html>
http://plnkr.co/edit/0f5bbaS38GCIjGtCfLmy?p=preview

I have given a working example of your requirements see http://plnkr.co/edit/uQLqB3CfSUlETQEcpsS5?p=preview
Change the html to
<div ng-repeat="movie in movies">
<button ng-click="selectedMovie(movie)">{{movie.name}}</button>
</div>
<div class="panel">
<h3>You have selected:</h3>
<p>{{movie.name}}</p>
<p>{{movie.format}}</p>
<p>{{movie.rate}}</p>
<p>{{movie.price}}</p>
</div>
javascript to
myApp.controller('MainController', ['$scope', function($scope) {
var data = {
"movie": [
{
"id": 1,
"name": "Star Wars The Phantom Menace",
"format": "DVD",
"rate": 4,
"price": 2
},
{
"id": 2,
"name": "Star Wars A New Hope",
"format": "DVD",
"rate": 6,
"price": 4
},
{
"id": 3,
"name": "Transformers",
"format": "Blu-Ray",
"rate": 7,
"price": 3
},
{
"id": 4,
"name": "Transformers Dark of the Moon",
"format": "Blu-Ray",
"rate": 6,
"price": 5
}
]};
$scope.movies = data.movie;
$scope.selectedMovie = function(movie){
$scope.movie = movie;
}
}]);

All you need to do is define the movies object inside your controller in order for the movies to be displayed in your front-end. Embedding the movies JSON directly in your controller would look something like this:
app.controller('MainController', ['$scope', function ($scope) {
$scope.movies1 =
[{
"id": 1,
"name": "Star Wars The Phantom Menace",
"format": "DVD",
"rate": 4,
"price": 2
},
{
"id": 2,
"name": "Star Wars A New Hope",
"format": "DVD",
"rate": 6,
"price": 4
},
{
"id": 3,
"name": "Transformers",
"format": "Blu-Ray",
"rate": 7,
"price": 3
},
{
"id": 4,
"name": "Transformers Dark of the Moon",
"format": "Blu-Ray",
"rate": 6,
"price": 5
}];
}]);
Note that I have removed the movie property from inside the movies object and converted movies to an array instead, so that ng-repeat will work properly.
If instead you need to have the movies JSON as a separate file you can load that file using the $http service as #KuZon noted.
$http.get('movies.json').then(function(json) {
$scope.movies1 = json.data.movie;
});
In this case I have left the movie attribute inside the JSON object, and used it to select the array to store in $scope.movies1.
You can see both approaches in this Plunkr
Finally, don't forget to use ng-click on your buttons to actually select the movie. Something like the following:
<button ng-click="selectMovie1(movie)">{{movie.name}}</button>
and in your controller:
$scope.selectMovie1 = function(movie) {
$scope.movie1 = movie
}