In the view available below I'm trying to select a value in the drop down box based on a key(colorId) available in the current ng-repeat object(user). Does anyone know how to do that?
<div ng-app>
<div ng-controller="MyCntrl">
<table>
<thead >
<tr>
<th width="50%">User</th>
<th width="50%" >Color</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td width="50%">{{user.name}}</td>
<td width="50%">
<select ng-model="user.colorid" ng-options="color.name for color in colors">
<option value="">Select color</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
</div>
The controller code is:
'use strict';
angular.module('nes',)
.controller('MyCntrl',['$scope',function ($scope) {
$scope.colors = [
{id:'1', name:'blue'},
{id:'2', name:'white'},
{id:'2', name:'red'}
];
$scope.users = [
{ name:'user1',colorId:'1'},
{ name:'user2',colorId:'2'}
];
}]);
You need to fix a few things in your <select> element:
use color.id as color.name in your ng-options.
ng-options="color.id as color.name for color in colors"
you typoed "colorid":
ng-model="user.colorId"
Here's a plunk of it working: http://plnkr.co/edit/DptvZuamWv9waFzI0Rcp?p=preview
Related
Data display in table form. and i want to get siblings input value on dropdown onchange.
<tr ng-repeat="x in record">
<td>{{x.company }}</td>
<td>{{x.contact}}</td>
<td>
<input type='hidden' value="{{x.id}}">
<select name='status' >
<option value='1'>Active</option>
<option value='0'>Inactive</option>
</select>
</td>
</tr>
How can we get it.
angular.module('app', []).controller('ctrl', function($scope) {
$scope.record = [
{ company: 'Comp1', contact: 'Cont1', id: 1 },
{ company: 'Comp2', contact: 'Cont2', id: 2 }
]
$scope.process = function(input) {
console.log(input);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<table ng-app='app' ng-controller='ctrl'>
<tbody>
<tr ng-repeat="x in record">
<td>{{x.company }}</td>
<td>{{x.contact}}</td>
<td>
<input type='hidden' ng-model='x.id' />
<select name='status' ng-model='x.active' ng-change='process(x.id)'>
<option value='1'>Active</option>
<option value='0'>Inactive</option>
</select>
</td>
</tr>
</tbody>
</table>
I just tryout to project answer over your question. This might some different because of little description. So provide more code detail if this will not get work for you.
HTML
<tr ng-repeat="x in record">
<td>{{x.company }}</td>
<td>{{x.contact}}</td>
<td>
<input type='hidden' value="{{x.id}}" ng-model="hdnInput">
<select name='status' ng-model="status" ng-change="callMe($index)">
<option value='1'>Active</option>
<option value='0'>Inactive</option>
</select>
</td>
</tr>
Controller
$scope.callMe = function(index){
console.log(this.hdnInput[index]);
}
I want to get a drop down lsit of various operating systems for the user to select. This is my code so far
<form id="main">
<table>
<tr>
<td class="display_bold"><label for="name">VM Name:</label></td>
</tr>
<tr>
<td class="display"><input type="text" ng-model="virMachine.vmName" size="40"></td>
</tr>
<tr>
<td class="display_bold" ><label for="name">OS Type:</label></td>
</tr>
<tr>
<td class="display"><input type="text" ng-model="virMachine.osVersion" size="40"></td>
</tr>
</table>
This is the OS list i want to create a drop-down menu out of.
$scope.operatingsystems = ["Ubuntu-16", "Centos 7", "Wimdows"];
How do I do it? I know I might have change the input type from text to something else but not sure what.
Just you can do this,
<select ng-model="osType">
<option ng-repeat="os in operatingsystems">{{os }}</option>
</select>
DEMO
angular.module('myApp',[]).controller('studentController', function($scope){
$scope.operatingsystems = ["Ubuntu-16", "Centos 7", "Wimdows"];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="studentController">
<table>
<tr>
<td class="display_bold"><label for="name">VM Name:</label></td>
</tr>
<tr>
<td class="display"><input type="text" ng-model="virMachine.vmName" size="40"></td>
</tr>
<tr>
<td class="display_bold"><label for="name">OS Type:</label></td>
</tr>
<tr>
<td class="display"><select ng-model="osType">
<option ng-repeat="os in operatingsystems">{{os }}</option>
</select></td>
</tr>
</table>
</div>
</body>
A dropdown in Angular.js could look something like this:
<select ng-model="osType">
<option value=" ">Choose OS</option>
<option ng-repeat="o in operatingsystems">{{o}}</option>
</select>
How would you go about creating a refined search? With the code below, the filter acts on both of the columns. For example, if you type in John, you will get both John Smith & Smith John. I want to use a dropdown as a filter by. I looked at other posts which mentioned filter: object.value or something.
I think I need to set the dropdown to a value which is then fed to the text box and filtered to the table.
HTML
<div ng-app="searchApp" ng-controller="searchCtrl">
<br>
<br>
<input type="text" ng-model="searchData">
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<select>
<option value="">FilterBy</option>
<option value="">FirstName</option>
<option value="">LastName</option>
</select>
<tr ng-repeat="name in names | filter:searchData">
<td>{{name.firstName}}</td>
<td>{{name.lastName}}</td>
</tr>
</tbody>
</table>
</div>
<script src=" search.js " type="text/javascript "></script>
.JS
var searchApp = angular.module('searchApp', []);
searchApp.controller('searchCtrl', function($scope) {
$scope.names = [
{"firstName":"John","lastName":"Smith"},
{"firstName":"Smith","lastName":"John"},
{"firstName":"John","lastName":"Doe"},
{"firstName":"Doe","lastName":"Jane"}
];
});
I added an ng-change to the filter drop down and set the filter object on that function call.
<select ng-model="by" ng-change="filter(by)">
<option value="">FilterBy</option>
<option value="firstName">FirstName</option>
<option value="lastName">LastName</option>
</select>
$scope.filter = function(by){
if(by){
$scope.filterData = { };
$scope.filterData[by] = $scope.searchData;
}else{
$scope.filterData = {};
}
};
Here is a link to a working example http://codepen.io/mkl/pen/GqpxGZ
I'm trying to create a function where I build a column from an array that list products. Then a second column that contains a select list of options I want to pair the second column with.
The end result will be an ajax call to a server that will insert each matched pair.
I created an example on JS Fiddl: https://jsfiddle.net/wnzj6wda/2/
Here is the code:
<html>
<header>
<title>myTittle</title>
</header>
<body ng-app='myApp' ng-controller='myController'>
<div class="col-md-10 col-md-offset-1">
<div>
<form>
<table class="table table-striped">
<thead>
<th>From File</th>
<th>Map To</th>
</thead>
<tr class="selector-row" ng-repeat="(key,value) in List1">
<td><span id="myspan">{{value}}</span>
</td>
<td style="padding:10px;">
<select name="repeatSelect" id="repeatSelect" ng-model="data" class="form-control">
<option ng-repeat="(key,value) in Match" value="{{value}}">{{value}}</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<button ng-click="SubmitMatched()">Show matched</button>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
<script>
var app = angular.module('myApp', [])
app.controller('myController', ['$scope', function($scope) {
$scope.List1 = ['product1', 'product2', 'product3', 'product4', 'product5'];
$scope.Match = ['match1', 'match2', 'match3', 'match4', 'match5'];
$scope.SubmitMatched = function() {
//I want to be able to submit results to be added to a database, where I can pass the coloms that match to the selected.
//Example:
// results = [{'product1':'match4','product2':'match5','product3':'match1','product4':'match3','product5':'match2'}]
}
}])
</script>
</html>
Here is the updated demo https://jsfiddle.net/wnzj6wda/3/
You have to make ng-model dynamic so that finally you will get that object with data as
in js
$scope.data ={};
in html
<select name="repeatSelect" id="repeatSelect" ng-model="data[value]" class="form-control">
<option ng-repeat="(key,value) in Match" value="{{value}}">{{value}}</option>
</select>
Hope this will help you
I have checkboxes with table headers, i want to hide the table columns and rows based on the checkbox click,
<ul>
<li ng-repeat="opt in fieldvalues"><input type="checkbox" ng-model="checked" value="{{opt}}" />{{opt}}</li>
</ul>
<table>
<tr>
<th ng-show="checked=='true'">Activity ID</a></th>
<th>Activity Description</th>
</tr>
<tr ng-repeat="nm in makerQueueData">
<td ng-show="checked=='true'">{{nm.formattedIdentifier}}</td>
<td>{{nm.description}}</td>
</tr>
</table>
I tried but no luck.
<ul>
<li ng-repeat="opt in fieldvalues"><input type="checkbox" ng-model="checked" value="{{opt}}" />{{opt}}</li>
</ul>
<table>
<tr>
<th ng-show="checked"><a>Activity ID</a></th>
//here checked gets bool value itself based on selection. you don't need to compare it to string 'true'.
//keep in mind i assume {{checked}} returns only bool value
<th>Activity Description</th>
</tr>
<tr ng-repeat="nm in makerQueueData">
<td ng-show="checked">{{nm.formattedIdentifier}}</td>
<td>{{nm.description}}</td>
</tr>
</table>
Working fiddle for your : http://jsfiddle.net/b69pkeLd/1/
Let me know if any issue occurs.
I hope this is what you are looking for:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.fieldvalues = [
{text: 'Test1', checked: false},
{text: 'Test2', checked: false}
];
$scope.makerQueueData = [
'Whatever your', 'data is'
];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-repeat="opt in fieldvalues">
<input type="checkbox" id="checkbox-{{$index}}" ng-model="opt.checked" value="{{opt.text}}" />
<label for="checkbox-{{$index}}">{{opt.text}}</label>
<table ng-show="opt.checked">
<tr>
<th>Activity ID</a></th>
<th>Activity Description</th>
</tr>
<tr ng-repeat="nm in makerQueueData">
<td ng-show="opt.checked'">{{$index}}</td>
<td>{{nm}}</td>
</tr>
</table>
</div>
</div>
Moreover, use <label> for type="checkbox" description. This makes the label clickable.