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
Related
using angularJs, code like this:
<td ng-repeat="i in data.numArr3">
<select ng-model="num{{i}}" ng-change="change()">
<option ng-repeat="item in data.numArr3" value="{{item}}">{{item}}</option>
</select>
</td>
controller:
$scope.data = {
numArr2: [0,1,2,3,4,5,6,7,8,9,10],
numArr3: ["-0",-1,-2,-3,-4,-5,-6,-7,-8,-9,-10],
}
It won't work;
I just want to create 11 selects, which have same options.
thanks~
You can do this using controllerAs
change your controller to ng-controller="myCtrl as vm"
access scope variable like this
ng-repeat="i in vm.data.numArr3"
Demo
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
var vm = this;
vm.num ={}
vm.data = {
numArr2: [0,1,2,3,4,5,6,7,8,9,10],
numArr3: ["-0",-1,-2,-3,-4,-5,-6,-7,-8,-9,-10],
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl as vm">
<table>
<tr>
<td ng-repeat="i in vm.data.numArr3">
<select ng-model="vm.num[i]" ng-change="vm.change()">
<option ng-repeat="item in vm.data.numArr3" value="{{item}}">{{item}}</option>
</select>
</td>
</tr>
</table>
</div>
At first, I'm using dirPagination. The problem is that when I search something, it's filtered correctly, but pagination number not change and also show all last number in pagination without any change and I see some page is empty because it does filter but page number is show.
<div data-ng-controller='productsController'>
<form `class='form-inline'>
<div class='form-group'>
<label>search</label>
<input type='text' data-ng-model='search' class='form-control' placeholder='search' />
</div>
</form>
<table class='table table-striped'>
<thead>
<tr>
<th>#</th>
<th>product</th>
<th>imet</th>
</tr>
</thead>
<tbody>
<tr dir-paginate='product in products|itemsPerPage:12|filter:search|orderBy:sortKey:reverse'>
<td>{{product.id}}</td>
<td>{{product.productName}}</td>
<td>{{product.time}}</td>
</tr>
</tbody>
</table>
<dir-pagination-controls max-size='10' direction-links='true' boundary-links='true' >
</dir-pagination-controls>
<script>
(function(){
var app = angular.module('products', ['angularUtils.directives.dirPagination']);
app.controller('productsController', function($scope, $http){
$scope.products = [];
$http.get('/products/json').success(function(data){
$scope.products= data;
});
});
})();
</script>
</div>
itemsPerPage must be the last filter, as below:
<tr dir-paginate='product in products | filter: search | orderBy: sortKey: reverse | itemsPerPage: 12'>
For more explanation, check it on FAQ on michaelbromley/angularUtils/.
I have a table that displays two columns using ng-repeat.
First column is a list of items pulled from one source.
Second column is a select element pulled from a second list.
What I want to do is automatically select an option in the dropdown, if it matches what is displayed in the left column.
I put together a fiddle: https://jsfiddle.net/raz1j9rt/1/
Here is my 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[value]" class="form-control">
<option ng-repeat="(key,value) in Match" value="{{value}}">{{value}}</option>
</select>
</td>
</tr>
</table>
</form>{{ data }}</div>
</div>
</body>
Here is my JS:
var app = angular.module('myApp', [])
app.controller('myController', ['$scope', function ($scope) {
$scope.data = {};
$scope.List1 = ['product1', 'product2', 'product3', 'product4', 'product5'];
$scope.Match = ['product1', 'somethtingElse1', 'product3', 'somethingElse2', 'product5'];
}])
Not really sure where to start on this...
Expanding on Claies point, here's a working fiddle.
https://jsfiddle.net/dboskovic/raz1j9rt/2/
Add this to your controller.
// setup default matches
angular.forEach($scope.List1, function(v){
$scope.data[v] = $scope.Match.filter(function(d){
if(d === v) return true;
return false;
})[0];
})
And then change your select to:
<select name="repeatSelect" id="repeatSelect" ng-model="data[value]" class="form-control" ng-options="x for x in Match"></select>
var app = angular.module("myapp", ["ngSanitize"]);
app.controller("controller", ['$scope', function($scope) {
$scope.tasks = [{
item: "Shopping",
status: true
}, {
item: "Cleaning",
status: false
}];
}]);
and html
<div ng-app="myapp">
<div ng-controller='controller'>
<table border=1 ng-repeat='task in tasks'>
<tr>
<td>{{task.item}}</td>
<td>{{task.status}}</td>
</tr>
</table>
</div>
</div>
I tried as above but i could not able to attach header to the table.And at the place of Done I am tring to attach a checkbox...I mean if status is true the chexk box must be checked or else unchecked.
Output:
Item Done
Shopping checkbox with ticked
Cleaning checkbox without ticked
See documentation for checkbox input
Not exactly the answer, but why do you repeat table instead of rows?
<div ng-app="myapp">
<div ng-controller='controller'>
<table border=1 >
<tr>
<th>Name</th>
<th>Status</th>
</tr>
<tr ng-repeat='task in tasks'>
<td>{{task.item}}</td>
<td><input type="checkbox" ng-model="task.status"></td>
</tr>
</table>
</div>
</div>
But I don't see any sense in table in your case.
<span ng-repeat="task in tasks">
<input type="checkbox" ng-model="task.status"> {{task.item}}
</span>
That would be much cleaner.
Do changes as follows in the HTML.
<body ng-app="myapp" ng-controller="ListController">
<table border="1" ng-repeat='task in tasks'>
<tr>
<td>
{{task.item}}
</td>
<td>
<input type="checkbox" ng-model="task.status">
</td>
</tr>
</table>
</body>
Do changes in the Angular js as follows.
var app = angular.module("myapp", []);
app.controller("ListController", ['$scope', function($scope) {
$scope.tasks = [{
item: "Shopping",
status: true
}, {
item: "Cleaning",
status: false
}];
}]);
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