In ng-change the selected value is not setting up in the ngchange function.
First time when I select a value its setting up as null, and again I try to select an another value, its setting the value of the previous selected value.
var ngInitParams = JsonConvert.SerializeObject(Model);
var firstVarId= Model.Variants.First().ProductId;
var firstVarName= Model.Variants.First().Name;
<section id="#inPageNavigationID" ng-controller="prodSpecsCtrl as main"
ng-init="main.init('#firstVarId', '#firstVarName')">
<div class="container" ng-init="main.loadSelect('#ngInitParams')">
<div>
<div class="row">
<div class="col-sm-6 fieldset">
<div class="form__item ">
<div>
<select class="-dropdown--two-columns" name="productvariants" id="sel1" data-placeholder="#selectOptionVal" ng-model="variant.ProductId"
ng-change="main.load('{{variant.ProductId}}','{{(main.JsonVariants.Variants | filter: {ProductId:variant.ProductId})[0].Name}}')">
<option value="" disabled>Select Model</option>
<option ng-repeat="variant in main.JsonVariants.Variants" value="{{variant.ProductId}}" selected="#firstVariantId" data-option-header="{{variant.CatalogCode}}">{{variant.Name}}</option>
</select>
<span class="fa fa-angle-down"></span>
</div>
</div>
</div>
</div>
</div>
<section>
this.init = function (varId, varName) {
this.load(varId, varName);
}
this.loadSelect = function (strjson) {
self.JsonVariants = JSON.parse(strjson);
}
Here is an example of an ng-change within a select.
https://plnkr.co/edit/ZhJbVfPRCLoeFwYoi3Mp?p=preview
<body ng-controller="MainCtrl">
<select ng-model="item" ng-change="changed(item)" ng-options="item.Name for item in items"></select>
<p>ID:{{selected.ID}} Name: {{selected.Name}}</p>
<p>You Selected: {{selected}}</p>
</body>
And Controller:
app.controller('MainCtrl', function($scope) {
$scope.items = [];
$scope.selected = {};
$scope.changed = function(item) {
$scope.selected = item;
}
function setupItems() {
for (var i = 0; i < 10; i++) {
var item = {ID: i, Name: "Item " + i}
$scope.items.push(item);
}
}
setupItems();
});
Related
I am new to Angularjs. I am trying to do is like this. I have an input field where user inputs a number. Then a dropdown is generated where number of options should be equal to the number entered by the user. Here is my code:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.addqty = function() {
var i;
for (i = 0; i < $scope.quantity; i++) {
$scope.choices = i;
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
Enter quantity: <input type="text" ng-model="qauntity" />
<button ng-click="addqty()">Add</button>
<fieldset data-ng-repeat="choice in choices">
<select>{{choices}}</select>
</fieldset>
</div>
Try something like this:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.choices = [];
$scope.quantity = 0;
$scope.addqty = function() {
$scope.choices = [];
for (i = 0; i < $scope.quantity; i++) {
$scope.choices.push(i)
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
Enter quantity: <input type="number" ng-model="quantity" />
<button ng-click="addqty()">Add</button>
<div>
<select>
<option ng-repeat="choice in choices">
{{choice}}
</option>
</select>
</div>
</div>
You have an empty array, then when you click the button an amount of items equal to the quantity that was input is pushed into the array, which in turn is used to populate the select. I think type="number" on the input is more appropriate in this instance, to make sure the user doesn't use text instead of a number.
$scope.choices = []; resets the array to empty before starting to populate it again, in case someone clicks the button multiple times.
If you want to spice things up a little and make the whole thing a little neater you can add <div ng-show="choices.length > 0"> around the select-tag. This will ensure that the dropdown is only rendered when there's atleast one item in the array.
All that's left to do then is make sure you can actually continue working with the selected value:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.choices = [];
$scope.quantity = 0;
$scope.selected;
$scope.addqty = function() {
$scope.choices = [];
for (i = 0; i < $scope.quantity; i++) {
$scope.choices.push(i)
$scope.selected = $scope.choices[0];
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
Enter quantity: <input type="number" ng-model="quantity" />
<button ng-click="addqty()">Add</button>
<div ng-show="choices.length > 0">
<select ng-model="selected">
<option ng-repeat="choice in choices">
{{choice}}
</option>
</select>
</div>
<div ng-show="choices.length > 0">
<label>Selected value: {{selected}}</label>
</div>
</div>
You don't have to write any javascript function to do this. You can make use of array.constructor method and pass the corresponding input number value to implement the functionality.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl"> Enter quantity:
<input type="number" ng-model="quantity" />
<button ng-click="val=quantity">Add</button>
<div ng-if="val!=undefined">
<select>
<option value="{{$index+1}}" ng-repeat="x in [].constructor(val) track by $index"> {{$index+1}} </option>
</select>
</div>
</div>
angular.module('app', []).controller('ctrl', function($scope){
$scope.show = function(){
$scope.array = [];
for(var i = 0; i < $scope.quantity; i++)
$scope.array.push(i + 1);
$scope.selected = $scope.array[0];
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='ctrl'>
<input type='number' ng-model='quantity' />
<input type='button' ng-click='show()' value='Create' />
</br>
<select ng-model='selected' ng-options="item for item in array">
</select>
</div>
You could create an array of objects in the scope and in your addqty function you can push an object to that array which includes the value and the text you want to the user to see.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.choises = [];
$scope.addqty = function() {
var i;
for (i = 0; i < $scope.quantity; i++) {
$scope.choises.push({value:i,text:'text'});
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
Enter quantity: <input type="text" ng-model="quantity" />
<button ng-click="addqty()">Add</button>
<div ng-show="choises.length > 0">
<select>
<option
value="{{choise.value}}"
ng-repeat="choise in choises">
{{choise.text}}
</option>
</select>
</div>
</div>
Just made more better by hiding the New dropdown until no value is assigned:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.choices = [];
$scope.quantity = 0;
$scope.addqty = function() {
$scope.choices = [];
for (i = 0; i < $scope.quantity; i++) {
$scope.choices.push(i)
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
Enter quantity: <input type="number" ng-model="quantity" />
<button ng-click="addqty()">Add</button>
<div>
<select ng-show="choices.length">
<option ng-repeat="choice in choices">
{{choice}}
</option>
</select>
</div>
</div>
I have created an select element as
<label class="item item-select no-border-bottom padding full-width custom-back">
<div class="input-label">Select Time Slot</div>
<select ng-model="addAppointment.timeSlot" name="timeSlot" class="custom-back" ng-disabled="!addAppointment.date" ng-options="timeSlot as timeSlot for timeSlot in availableTimeSlots" required>
</select>
</label>
I would like a option having message No Data in select when ng-options array is empty.
You could add an <option> with ng-if to your select. Here is a contrived example of how this would work.
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.options = [];
$scope.selectedOption = undefined;
$scope.addOptions = function() {
var start = $scope.options.length;
for(var i = 1; i <= 5; i++) {
$scope.options.push('Option #' + (start + i));
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<select ng-model="selectedOption" ng-options="opt as opt for opt in options">
<option value="" ng-if="options.length === 0">No Data</option>
</select>
<button type="button" ng-click="addOptions()">Add Options</button>
</div>
I am having issue with ng-repeat , its replacing all values with latest one.
E.g. I am adding a value to textbox then adding that value in ng-repeat div but its replacing all values with last value entered.
Here is Jsfiddle
https://jsfiddle.net/mahajan344/9bz4Lwxa/656/
This is happening because you have only one statusObj and you are modifying it every time someone clicks the Add New Status button. Delete the statusObj you have now, and have the AddNewStatus method create a new one each time:
var xyzApi = xyzApi || {
sayHello: function() {
return "hey there\n";
}
};
angular.module('demoApp', [])
.controller('MainController', MainController)
.provider('xyzApi', function XyzApiProvider() {
this.$get = function() {
var xyzApiFactory = {
otherFunction: function() {
//$log.log('other function called');
return 'other function \n';
}
};
//console.log(xyzApiFactory, xyzApi);
angular.merge(xyzApiFactory, xyzApi);
return xyzApiFactory;
};
});
function MainController(xyzApi) {
var vm = this;
vm.test = '';
vm.listOfStatus = [];
vm.showStatusError = false;
vm.statusText = "";
vm.sayHello = function() {
vm.test += xyzApi.sayHello() + xyzApi.otherFunction();
}
vm.AddNewStatus = function(statusText) {
if (statusText.length < 1) {
vm.showStatusError = true;
return;
} else {
vm.showStatusError = false;
}
var statusObj = {
StatusComment: statusText,
scId: 0,
scTimeStamp: new Date(),
JobNum: 0,
IsNew: 0,
};
vm.listOfStatus.push(statusObj);
vm.statusText = "";
};
vm.RemoveStatus = function(index) {
vm.listOfStatus.splice(index, 1);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
<div ng-app="demoApp" ng-controller="MainController as mainCtrl">
<pre>{{mainCtrl.test}}</pre>
<button ng-click="mainCtrl.sayHello()">
say hello!!
</button>
<div id="DivStatus">
<div class="form-group">
Status
<div class="col-md-3 col-sm-3 col-xs-12">
<input type="text" ng-model="mainCtrl.statusText" id="txtStatus" class="form-control col-md-7 col-xs-12">
<div class="text-danger error-message" id="txtStatusError" ng-show="showStatusError">Please enter new status</div>
</div>
<div class="col-md-3 col-md-3x col-sm-3 col-xs-12">
<input type="button" class="btn" ng-click="mainCtrl.AddNewStatus(mainCtrl.statusText)" value="Add New Status" />
</div>
</div>
<div class="form-group" ng-repeat="statusObj in mainCtrl.listOfStatus track by $index">
<div class="col-md-3 col-sm-3 col-xs-12">
<input type="text" value="{{statusObj.StatusComment}}" ng-disabled="true" class="form-control col-md-7 col-xs-12">
</div>
<span class="remove-record" ng-click="mainCtrl.RemoveStatus($index)" style="cursor:pointer"><i class="fa fa-times"></i></span>
</div>
</div>
</div>
I am trying to get the array id of selected checkbox but unable to get the array. I need the array in format of ["302740", "42006", "331497"]
here it is my app.js
var app = angular.module('app', []);
function Ctrl($scope) {
$scope.categories = [ {"tid":"302740","name":"2 BE 3"},{"tid":"42006","name":"A Line"},{"tid":"331497","name":"Activa"} ];
$scope.brandlist = [];
$scope.get = function (val) {
console.log(val);
var idx = $scope.brandlist.indexOf(val);
if (idx > -1)
$scope.brandlist.splice(idx, 1);
else
$scope.brandlist.push(val);
console.log($scope.brandlist);
// should come like selected array ["302740", "42006", "331497"]
}
}
and here it is the html
<div ng-controller="Ctrl">
<span ng-repeat="(key,val) in categories">
<label class="checkbox" for="{{key.tid}}">
<input type="checkbox" ng-change="get(val.tid)" ng-model="brandlist[val.tid]" ng-checked="brandlist.indexOf(val.tid) > -1" name="group" id="{{val.tid}}" />
{{val.name}}
</label>
</span>
</div>
plunker
Consider trying this
$scope.categories = [ {"tid":"302740","name":"2 BE 3"},{"tid":"42006","name":"A Line"},{"tid":"331497","name":"Activa"} ];
$scope.selecetedCategories = function toggleSelection(category){
var idx = $scope.selectedCategories.indexOf(category);
if(idx > -1){
$scope.selecetedCategories.splice(idx,1);
}
else{
$scope.selecetedCategories.push(category);
}
};
You can print the selected categories like this
console.log($scope.selecetedCategorie);
And your html:
<input type="checkbox" name="selectedCategories"
value="{{category}}" ng-checked="selectedCategories.indexOf(category) >
-1" ng-click="toggleSelection(category)"/>
If you're not worried about manipulating the source array, you can use that to maintain the state.
HTML
<div ng-controller="Ctrl">
<span ng-repeat="(key,val) in categories">
<label class="checkbox" for="{{key.tid}}">
<input type="checkbox" ng-model="val.checked" name="group" id="{{val.tid}}" />
{{val.name}}
</label>
</span>
</div>
JS:
$scope.categories = [ {"tid":"302740","name":"2 BE 3"},{"tid":"42006","name":"A Line"},{"tid":"331497","name":"Activa"} ];
// get the selected categories
var selectedCategories = $scope.categories.filter(function(itm) {
return itm.checked;
});
I have the following DIV:
<div ng-controller="userControl">
<div ng-repeat="user in users">
<u>{{user.id}} : {{user.name}}</u><br />
<div ng-repeat="role in user.roles">
{{role.name}}
</div>
<br />
</div>
<form ng-submit="addRoleToUser()">
<select name="userSelect">
<div ng-repeat="user in users">
<option value="{{user.id}}">{{user.name}}</option>
</div>
</select>
<input type="submit" value="add">
</form>
</div>
This is my controller:
function userControl($scope,$http) {
$scope.users = [
{"id":"0","name":"Username1","roles":[{}]},
{"id":"1","name":"Username2","roles":[{}]},
]
$scope.addUser = function() {
var nextid = $scope.getNextId();
$scope.users.push({id:nextid,name:$scope.userName});
/*
$.post({}); //Push changes to server
*/
$scope.userName = '';
};
$scope.getNextId = function() {
var count = 0;
angular.forEach($scope.users, function(data) {
count = data.id;
});
var count2 = parseInt(count)+1;
return count2;
};
}
I can see the first ng-repeat is working fine and is listing the user.id and user.name, however the second ng-repeat (the one inside the form) does not display the information, is that related to the fact that I've already looped through that element in the previous div?
You misused the select directive :
<select ng-model="selectedUser" name="userSelect" ng-options="user.id as user.name for user in users">
http://docs.angularjs.org/api/ng.directive:select