I have a button that currently passes the selected value to the removeContract().
<td class="col-md-1" colspan="1" style="text-align: center; vertical-align: middle;">
<button class="btn btn-primary" data-ng-click="removeContract(ctrl.selectValue, contractIndex)"> <= </button>
</td>
<td class="col-md-5" colspan="5">
<label class="control-label">{{item.fields[132].displayName}}</label>
<select size="5" ng-model="ctrl.selectValue">
<option data-ng-repeat="contract in contracts">{{contract.CONT_ORDNO}} - {{contract.SUPP_NAME}}[{{contract.SUPP_NUM}}]</option>
</select>
</td>
However, I need to send back the actual current contract model, called 'contract' above. The function's 1st parameter needs to be the currently selected contract. How would I achieve this?
Some suggestions as per the current code :
Instead of passing whole {{contract.CONT_ORDNO}} - {{contract.SUPP_NAME}}[{{contract.SUPP_NUM}}] into the ng-model just pass the contract.CONT_ORDNO to identify the selected data from the dropdown.
<option data-ng-repeat="contract in contracts" value="contract.CONT_ORDNO">{{contract.CONT_ORDNO}} - {{contract.SUPP_NAME}}[{{contract.SUPP_NUM}}]</option>
As we already have contracts array of objects inside the controller.Hence, no need to pass the second parameter inside the removeContract function.
<button class="btn btn-primary" data-ng-click="removeContract(ctrl.selectValue)"> <= </button>
Based on the selected value we can remove the contract object from the contracts array inside removeContract function with the help of Array filter() method.
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.contracts = [
{
"CONT_ORDNO": "1",
"SUPP_NAME": "alpha",
"SUPP_NUM": "0001"
},
{
"CONT_ORDNO": "2",
"SUPP_NAME": "beta",
"SUPP_NUM": "0002"
},
{
"CONT_ORDNO": "3",
"SUPP_NAME": "gaama",
"SUPP_NUM": "0003"
},
{
"CONT_ORDNO": "4",
"SUPP_NAME": "xyz",
"SUPP_NUM": "0004"
}
];
$scope.removeContract = function(selectedVal) {
var removedObj = $scope.contracts.filter(function(item) {
return item.CONT_ORDNO != selectedVal;
});
console.log(removedObj);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<td class="col-md-1" colspan="1" style="text-align: center; vertical-align: middle;">
<button class="btn btn-primary" data-ng-click="removeContract(ctrl.selectValue)"> <= </button>
</td>
<td class="col-md-5" colspan="5">
<label class="control-label">{{item.fields[132].displayName}}</label>
<select size="5" ng-model="ctrl.selectValue">
<option data-ng-repeat="contract in contracts" value="{{contract.CONT_ORDNO}}">{{contract.CONT_ORDNO}} - {{contract.SUPP_NAME}}[{{contract.SUPP_NUM}}]</option>
</select>
</td>
</div>
Related
Consider I have a list of objects like -
var configs = [{
id: "1",
name: "config1"
},
{
id: "2",
name: "config2"
}
];
I use the following to search through the config list and bind the selected config to another variable called changed_config.
<table style="width:900px;">
<tr>
<th style="width:500px; margin:50px">Config Name</th>
<th style="width:150px;">Config Value</th>
</tr>
<tr ng-repeat="changed_config in changed_configs">
<td>
<input type="text" class="form-control" ng-model="changed_config.id" list="names">
<datalist id="names">
<option ng-repeat="option in configs | filter:search | limitTo:30" ng-value="option.name"> {{option.name}}
</option>
</datalist>
<td>
<input type="text" class="form-control" ng-model="changed_config.value">
</td>
</tr>
</table>
<div class="row">
<button type="button" id="add-reward-grp-btn" ng-click="addConfig()"
class="btn btn-primary">Add Config
</button>
</div>
Controller Code(Not complete code, just relevant snippets):
var app = angular.module("drs_scheduler_app", []);
app.controller("CreateSchedulerJob", function ($scope, $http) {
$scope.changed_configs = [];
$scope.configs = [{
id: "1",
name: "config1"
},
{
id: "2",
name: "config2"
}
];
$scope.addConfig = function () {
var config = {
"id": "",
"value": ""
};
$scope.changed_configs.push(config);
console.log(config);
console.log(JSON.stringify($scope.changed_configs));
}
}
Currently the code displays and binds the name of the selected config to the changed_config variable. But I need the id to be bound to the changed_config variable and the name to be displayed in the html.
If I change the <option> to use id, then id will be displayed.
How do I bind one property to a variable but show another in the html??
Here is the solution you needed,
Procedure:
When an option is selected from datalist I m checking for that
change
That change is observed through input on which datalist is added
On that input change i,e when option is selected I m assigning that
id to id key of respective changed_config
That is inturn displayed in second textbox
It works for dynamic
// Code goes here
function cntryController($scope) {
$scope.LoadSessionData=function(val)
{
console.log(val);
};
$scope.changed_configs = [];
$scope.configs = [{
id: "1",
name: "config1"
},
{
id: "2",
name: "config2"
}
];
$scope.addConfig = function () {
var config = {
"id": "",
"value": ""
};
$scope.changed_configs.push(config);
console.log(config);
console.log(JSON.stringify($scope.changed_configs));
}
$scope.test = function(data, index){
console.log(data)
var newArray = $scope.configs.filter(function (config) {
return config.name == data;
});
console.log(newArray)
if(newArray.length){
var new_changed_config = $scope.changed_configs[index];
new_changed_config.id = newArray[0].id;
}
}
}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<div ng-app="" ng-controller="cntryController">
<table cellspacing="10" cellpadding="10">
<tr>
<th>Config Name</th>
<th>Config Value</th>
</tr>
<tr ng-repeat="changed_config in changed_configs">
<td>
<input type="text" class="form-control" ng-model="changed_config.name" list="names" ng-change="test(changed_config.name, $index)">
<datalist id="names">
<option ng-repeat="option in configs | filter:search | limitTo:30" value={{option.name}}>{{option.name}}
</option>
</datalist>
</td>
<td>
<input type="text" class="form-control" ng-model="changed_config.id"/>
</td>
</tr>
</table>
<div class="row">
<button type="button" id="add-reward-grp-btn" ng-click="addConfig()" class="btn btn-primary">Add Config</button>
</div>
</div>
</html>
Please run the above snippet
Here is a working DEMO
I have a button that when pressed I need to pass the object 'contract' into.
<td class="col-md-1" colspan="1" style="text-align: center; vertical-align: middle;">
<button class="btn btn-primary" data-ng-click="removeContract(ctrl.selectValue, contractIndex)"> < </button>
</td>
<td class="col-md-5" colspan="5">
<label class="control-label">{{item.fields[132].displayName}}</label>
<select size="5" ng-model="ctrl.selectValue">
<option data-ng-repeat="contract in contracts" value="{{contract}}">{{contract.CONT_ORDNO}} - {{contract.SUPP_NAME}}[{{contract.SUPP_NUM}}]</option>
</select>
</td>
The object is being passed but it is a string of the object, not the object itself:
I'm aware I could convert it after, but the way the app was designed it's supposed to be the object.
How do I pass the actual object?
Use this construction:
<select size="5" ng-model="ctrl.selectValue" ng-options="(contract.CONT_ORDNO + ' - ' + contract.SUPP_NAME + '[' + contract.SUPP_NUM + ']') for contract in contracts">
</select>
I have a table with a dropdown selection in each row, I wanted to make an upload button (to work) only when the the drop down status is done. Right now its not working properly
fiddle here
<body ng-app='saapp', ng-controller = "homeCtrl">
<body>
<table>
<tr data-ng-repeat="test in tests ">
<td>{{$index+1}}</td>
<td>{{test}}</td>
<td style="color:red"> pending</td>
<td><font size="2" color="red"></font>
<select ng-model="checkStatus" ng-init="checkStatus='NotDone'", ng-options="status.sta as status.name for status in status" ng-change="changePayStatus(checkStatus)"></select>
</td>
<td class="col-md-2">
<P>
<button type="button" ng-show="!pictureEditor" ng-click="pictureEditor = true" ng-disabled="enableUpload" class="btn-primary btn-u-xs">Upload </button>
<div ng-show="pictureEditor">
<input type="file" name="file" onchange="angular.element(this).scope().selectFile(this.files)"/>
<div ng-show="pictureEditor" class="input-group"><span class="input-group-btn">
<button ng-click="saveDiagnosticReport(test, appointmentDetails); pictureEditor = false " class="btn btn-default">Save <i class="input-save fa fa-check-square"></i></button>
<button ng-click="pictureEditor = false" class="btn btn-default">Back <i class="fa fa-undo"></i></button></span></div>
</div>
</P>
</td>
</tr>
<table>
</body>
angular controller
var app = angular.module('saapp',[ ]);
app.controller('homeCtrl', function($scope){
$scope.tests = ["A", "B", "C"]
$scope.status = [{name :"Done", sta : 1}, {name : "NotDone", sta : 0}];
$scope.enableUpload = 1;
$scope.changePayStatus = function(status) {
console.log(status);
if(status == '1') {
$scope.enableUpload = 0;
}
else if(status == "0") {
$scope.enableUpload = 1;
}
};
})
You need to bind each row's upload button's disablity state to different model inside $scope, one way for doing that is to hold each row disablity state in it self,so you need to change tests array to an object like this:
$scope.tests = [{name:"A",disabled:1}, {name:"B",disabled:1}, {name:"C",disabled:1}]
disabled now holds the state of upload button disability for each row.
by changing tests this way, you'll need to change your code like bellow to achieve what you are looking for:
<table>
<tr data-ng-repeat="test in tests ">
<td>{{$index+1}}</td>
<td>{{test.name}}</td>
<td style="color:red"> pending</td>
<td><font size="2" color="red"></font>
<select ng-model="checkStatus" ng-init="checkStatus='NotDone'"
ng-options="status.sta as status.name for status in status"
ng-change="changePayStatus(checkStatus,test)"></select>
</td>
<td class="col-md-2">
<p>
<button type="button" ng-show="!pictureEditor" ng-click="pictureEditor = true"
ng-disabled="test.disabled" class="btn-primary btn-u-xs">Upload </button>
...
</p>
</td>
</tr>
<table>
Edited: As you can see in the HTML,I'm passing test object that I've got from ng-repeat to changePayStatus method, while test is member of tests and we've got tests from the scope, therefore test it self is from the scope and angular will handle changes on it,in views you can pass models that you've got from scope, to controller again and angular handles the rest.
so you also need to change controller like this:
app.controller('homeCtrl', function($scope){
$scope.tests = [{name:"A",disabled:1}, {name:"B",disabled:1}, {name:"C",disabled:1}]
$scope.status = [{name :"Done", sta : 1}, {name : "NotDone", sta : 0}];
$scope.changePayStatus = function(status,testItem) {
console.log(status);
if(status == 1) {
testItem.disabled= 0;
}
else if(status == 0) {
testItem.disabled= 1;
}
};
});
An edited working sample can be found Here
hope that helps.
I'm a new developer using Angular JS to create an orders page for an app I created in Ruby on Rails. I would like to get a few Angular variables to display:
order.id (displays)
order.user.email (does not display)
order.total (does not display)
order.product.name (displays)
Only 2 of the 4 variables display. When I put a string or integer into the {{}} Angular notation in place of order.total | currency, the string or integer displays. However, when I try the same with order.product.name, nothing happens.
Here is my relevant code:
View.html:
<div ng-controller="OrdersCtrl">
<h1>Orders</h1>
<div class="container">
<form class="form-inline" ng-submit="addOrder()">
<strong>Add Order: </strong>
<select ng-model="newOrder.product_id" class="form-control">
<option value="" disabled selected>Select a Product</option>
<option ng-repeat="product in products" value="{{product.id}}"> {{product.name}}</option>
</select>
<input type="number" step="1" class="form-control" placeholder="Total" ng-model="newOrder.total">
<input type="number" class="form-control" ng-model="newOrder.product_id">
<input type="submit" value="+" class="btn btn-success">
</form>
<table class="table table-hover">
<thead>
<td>Order ID</td>
<td>Total</td>
<td>Product</td>
<td></td>
</thead>
<tr ng-repeat="order in orders | orderBy:'-id':reverse">
<td>
{{order.id}}<small ng-show="order.user_id"><br>-{{order.user.email}}</small>
</td>
<td>
<strong>{{order.total | currency}}</strong>
</td>
<td>
{{order.product.name}}
</td>
<td>
<button ng-click="deleteOrder(order)" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
</td>
</tr>
</table>
</div>
Controller (app.js)
var app = angular.module('shop', ['ngResource']);
//Workaround to get Angular running
$(document).on('ready page:load', function() {
angular.bootstrap(document.body, ['shop'])
});
//factory for models
app.factory('models', ['$resource', function($resource){
var orders_model = $resource("/orders/:id.json", {id: "#id"});
var products_model = $resource("/products/:id.json", {id: "#id"});
var x = {
orders: orders_model,
products: products_model
};
return x;
}]);
//connect app to OrdersCtrl controller
app.controller('OrdersCtrl', ['$scope', 'models', function($scope, models){
// Here will be all code belonging to this controller
$scope.orders = models.orders.query();
$scope.products = models.products.query();
//add new orders
$scope.addOrder = function(){
//only orders with product id or zero total gets added
if(!$scope.newOrder.product_id || $scope.newOrder.total === ''){ return; }
//Order can be submitted if product_id and total are filled out
order = models.orders.save($scope.newOrder, function(){ //POST
recent_order = models.orders.get({id: order.id});
$scope.orders.push(recent_order);
$scope.newOrder = '';
});
}
//delete orders
$scope.deleteOrder = function(order){
models.orders.delete(order);
$scope.orders.splice($scope.orders.indexOf(order), 1);
};
}]);
I can't find a way to restrict the action triggered by ng-change to only the row operated by the user. So, if user selects "League" on dropdown 1, two dropdowns should be displayed on the "Available Items" column. The one from the top lets you select a sport, when selected, down dropdown should display league options. The problem now is that all dropdowns from the table get populated (you can see that if you select "league" on another row's dropdown, league options are already displayed before you select your sport). What I need is to restrict function's action only to row operated by user.
Here's a fiddle:
https://embed.plnkr.co/kAiLw40hUvnLk9jv86aj/
<div class="col-md-12 limitObjects">
<h4>Limit Object: </h4>
<div style="overflow: auto; max-height: 500px; height: 100%">
<table border="0" class="table-bordered myTable" >
<tbody>
<tr ng-repeat="item in userMappings" ng-model="item">
<td class="col-md-4">
{{item.idsport}}, Game Type {{item.idgametype}}, {{item.name}} (Current limit {{item.value}}) {{item.mapped}}
</td>
<td class="col-md-3 mapType" style="padding-bottom: 25px; padding-left: 15px" >
<h4>Mapping Type: <span style="font-size:0.8em">{{mapping.name}}</span> </h4>
<select ng-model="item.mapping" ng-change="which(item, $index, event)" ng-options="mapping.name for mapping in mappingType" se-change=''></select>
</td>
<td class="col-md-4" style="padding-bottom: 25px; padding-left: 10px">
<h4>Available Items:</h4>
<select ng-show="item.buau" ng-model="sport" ng-change="getID(sport, $index, $event); table($event)" ng-options="sport.name for sport in sportsList"></select>
<select ng-show="item.buau == false" ng-model="sportLeague" ng-change="getLeaguecategories(sportLeague, $index, $event)" ng-options="sportLeague.name for sportLeague in sportsList" style="float: left;"></select>
<select ng-show="item.buau == false" ng-model="selectedLeague" ng-change="getID(selectedLeague, $index)" ng-options="selectedLeague.name for selectedLeague in leagueList" ></select>
</td>
<td class="col-md-4" style="padding-bottom: 25px; padding-left: 15px">
<h4>Subjects: </h4>
<select ng-model="subject" ng-change="getsubjectID(subject, $index)" ng-options="subject.description for subject in limitSubject"></select>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
$scope.mappingType = [{name: "Sport"}, {name: "League"}, {name: "No Mapping"}];
$scope.sportsList = [{id : 34, name : "[Default]"}, {id: 15, name : "Alpine Skiing"}, { id : 8, name : "American Football" }, { id : 23, name : "Australian Rules"}];
$scope.getLeaguecategories = function($event){
$scope.leagueList = [{"name": "NFL"}, {"name": "NCAA"}, {"name": "All others"}];
}
$scope.userMappings =[{"id":"1","idgametype":"81","idsport":"NFL","mapped":"0","name":"Side","online":"1","profilelimitkeyid":"1","value":"3000"},{"id":"2","idgametype":"81","idsport":"NFL","mapped":"4","name":"Total","online":"1","profilelimitkeyid":"1","value":"3000"},{"id":"3","idgametype":"81","idsport":"NFL","mapped":"0","name":"IfBets","online":"1","profilelimitkeyid":"1","value":"500"},{"id":"4","idgametype":"81","idsport":"NFL","mapped":"0","name":"MoneyLine","online":"1","profilelimitkeyid":"1","value":"2000"},{"id":"5","idgametype":"81","idsport":"NFL","mapped":"1","name":"Parlays","online":"1","profilelimitkeyid":"1","value":"700"},{"id":"6","idgametype":"81","idsport":"NFL","mapped":"0","name":"Related","online":"1","profilelimitkeyid":"1","value":"0"},{"id":"7","idgametype":"81","idsport":"NFL","mapped":"0","name":"Reverses","online":"1","profilelimitkeyid":"1","value":"500"},{"id":"8","idgametype":"81","idsport":"NFL","mapped":"2","name":"Teasers","online":"1","profilelimitkeyid":"1","value":"0"}];
$scope.which = function( item, index ) {
if ( item.mapping.name === "Sport" ){
item.buau = true;
} else if ( item.mapping.name === "League" ) {
item.buau = false;
} else if ( item.mapping.name === "No Mapping" ){
}
}