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>
Related
I am using ng-repeat to loop though elements which could be numeric or object. I am trying to use condition to display number or another sub ng-repeat. Following an example of code
<tr ng-repeat="(key,val) in vm.data">
<td>{{key}}</td>
<td ng-repeat="y in val">
<span ng-if="angular.isNumber(y)">{{y}}</span>
<table>
<tr ng-repeat="(a,b) in y"><td>{{a}}</td><td>{{b}}</td></tr>
</table>
</td>
</tr>
I am very new to angular. Please help.
Try like the below code, also please check this plunker for working example.
Controller:
$scope.isNumber = angular.isNumber;
Template:
<span ng-if="isNumber(value)">Valid Number</span>
Bind the angular.isNumber function to a function in your controller.
var app = angular.module("App", []);
app.controller("vmCtrl", function () {
var vm = this;
vm.isNumber = angular.isNumber;
vm.data = {
"thing1": [1,2,3,4],
"thing2": [{
"something1a": "something1b",
"something2a": "something2b"
},
{
"somethingElse1a": "somethingElse1b",
"somethingElse2a": "somethingElse2b"
}]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<table ng-app="App" ng-controller="vmCtrl as vm">
<tr ng-repeat="(key,val) in vm.data">
<td>{{key}}</td>
<td ng-repeat="y in val">
<span ng-if="vm.isNumber(y)">{{y}}</span>
<table>
<tr ng-repeat="(a,b) in y"><td>{{a}}</td><td>{{b}}</td></tr>
</table>
</td>
</tr>
</table>
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>
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 a method where I iterate through an array, using ng-repeat and pair each item with a value from a dropdown list.
Here is a jsfiddle of that method:
https://jsfiddle.net/4zbvv5gq/4/
<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>
var app = angular.module('myApp', [])
app.controller('myController', ['$scope', function ($scope) {
$scope.data = {};
$scope.List1 = ['product1', 'product2', 'product3', 'product4', 'product5'];
$scope.Match = ['match1', 'match2', 'match3', 'match4', 'match5'];
}])
My challenge is I want to be able to let a user click on something like an "add" link in any of the rows and 1)create a duplicate of that row, then 2) select a different value from the select list.
You just need to add a "Add Row" button at the end and push a new value to your List1 like this in your controller. See an update to your fiddle here.
$scope.addRow = function(){
var len = $scope.List1.length;
$scope.List1.push('product'+(len+1));
}
And right after your table, add a button that calls the above function:
</table>
<button ng-click="addRow()">Add a row</button>
Dublicate row in angular is possible.I give an sample code for dublicate row
index.html part:
<body ng-controller="MyCtrl">
<div style="padding: 10px;">
<h2>Languages</h2>
<br/>
<div style="width: 90%; display: inline-block; border: 1px silver dotted;">
<div class="row">
<div class="col-xs-3">
<select class="form-control" ng-init="nativeLanguage.level = 'Native'" data-ng-model="nativeLanguage.level" tooltip="Level">
<option value="Native" ng-selected="true">Native</option>
</select>
</div>
<div class="col-xs-4">
<select class="form-control" data-ng-model="nativeLanguage.name" tooltip="Language">
<option value="">Language</option>
<option value="EN">English</option>
<option value="IT">Italian</option>
<option value="DE">German</option>
<option value="FR">French</option>
</select>
</div>
<div class="col-xs-3">
<input type="text" data-ng-model="nativeLanguage.remark" class="form-control" placeholder="Remark" tooltip="Remark">
</div>
<div class="col-xs-2">
</div>
</div>
<div select-last ng-repeat='language in languages'></div>
</div>
<a class="btn" style="margin-bottom: 27px;" href="#" tooltip="Add" ng-click='addRow()'>
<i class="glyphicon glyphicon-plus"></i>
</a>
<pre>{{nativeLanguage | json}}</pre>
<pre>{{languages | json}}</pre>
</div>
</body>
</html>
ap.js part:
var myApp = angular.module('myApp',[]);
myApp.directive('selectLast', function () {
return {
restrict: 'A',
transclude: true,
templateUrl: 'language.html',
/*scope: {
level: '=',
name: '=',
remark: '='
},*/
replace: true
};
});
function MyCtrl($scope) {
$scope.languages = [];
/*var nativeLanguage = {
level: $scope.hr.language.level,
name: $scope.hr.language.name,
remark: $scope.hr.language.remark
};*/
$scope.languages.push($scope.nativeLanguage);
$scope.addRow = function(){
var newLanguage = {
level: $scope.level,
name: $scope.name,
remark: $scope.remark
};
$scope.languages.push(newLanguage);
console.log('+ clicked');
};
$scope.deleteRow = function(rowNo) {
/*$scope.items.splice($scope.newitem);*/
$scope.languages.splice(rowNo, 1);
console.log('- clicked in row ' + rowNo);
};
}
Here is the background:the checkbox was checked when "isChecked == 1" while its initalization,however,it doesn't trigger the "ng-change" event in its first "click" action.
<td ng-repeat="isCheck in item.check track by $index">
<input type="checkbox" ng-model="isCheck" ng-checked="isCheck == 1" ng-true-value="1" ng-false-value="0" ng-change="f(isCheck, item, vm.modules[$index])"/>
</td>
Check this working code:
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {
$scope.item = {};
$scope.item.check = [1, 0, 1, 0];
$scope.f = function(isCheck) {
console.log(isCheck);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<table>
<tr>
<td ng-repeat="isCheck in item.check track by $index">
<input type="checkbox" ng-model="isCheck" ng-checked="isCheck === 1" ng-true-value="1" ng-false-value="0" ng-change="f(isCheck)"/>
</td>
</tr>
</table>
</div>
</div>
ng-checked cannot work alongside ng-change if ng-model is changed programatically, check official docs:
https://docs.angularjs.org/api/ng/directive/ngChange