I am unable to bind selected option in dropdown control. I don't want whole object of $scope.Types inside $scope.obj. It should just have value of $scope.Types inside $scope.obj.type
var app = angular.module("myApp", []);
app.controller("MyController", function($scope) {
$scope.types =
[
{ label: "Pizza", value: 1 },
{ label: "Cakes", value: 2 },
{ label: "Pastry", value: 3 }
];
$scope.obj = { type : 1 };//I want dropdown selected value to be updated in type variable
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ul ng-app="myApp" ng-controller="MyController">
<select name="status" ng-model="obj.value"
ng-options="type.value as type.label for type in types track by type.value">
<option value="">Select Types</option>
</select>
</ul>
I am not getting what wrong I am doing here.
var app = angular.module("myApp", []);
app.controller("MyController", function($scope) {
$scope.obj = {};
$scope.types =
[
{ label: "Pizza", value: 1 },
{ label: "Cakes", value: 2 },
{ label: "Pastry", value: 3 }
];
$scope.obj.value = 2;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ul ng-app="myApp" ng-controller="MyController">
<select name="status" ng-model="obj.value"
ng-options="type.value as type.label for type in types">
<option value="">Select Types</option>
</select>
</ul>
Like this?
var app = angular.module("myApp", []);
app.controller("MyController", function($scope) {
$scope.$watch('selectedValue', function(newValue, oldValue) {
if (newValue){
$scope.obj.type = newValue.value;
}
});
$scope.types =
[
{ label: "Pizza", value: 1 },
{ label: "Cakes", value: 2 },
{ label: "Pastry", value: 3 }
];
$scope.obj = { type: 1 };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ul ng-app="myApp" ng-controller="MyController">
<select name="status" ng-model="selectedValue"
ng-options="type as type.label for type in types track by type.value">
<option value="">Select Types</option>
</select>
{{ obj.type}}
</ul>
Related
I have a select multiple like this
<select
id="countries"
ng-model="country"
ng-options="option.name for option in countryOptions track by option.id"
multiple>
</select>
to populate this select I am doing:
let countries = [];
countries.push({
id: country.id,
name: country.name,
selected: false
});
$scope.countryOptions = countries;
then acting on another element, I loop scope.countryOptions to check if any of its elements are in another array, and in that case I mark them as selected:
$scope.countryOptions.forEach((country, index) => {
$scope.countryOptions[index].selected = activeCountries.indexOf(country.id) !== -1;
});
What should I do to have the selected elements highlighted in the select multiple (in the UI)?
Your data source $scope.countryOptions and the user's selected countries $scope.country are different. Keep your data source pure and track user selections separately.
angular.module('selectExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.countryOptions = [{ id: 1, name: "Brazil" },
{ id: 2, name: "France" },
{ id: 3, name: "Djibouti" }
];
let activeCountries = [1, 3]
// init
$scope.country = $scope.countryOptions.filter(c => activeCountries.indexOf(c.id) > -1)
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.10/angular.min.js"></script>
<div ng-app="selectExample">
<div ng-controller="ExampleController">
<select id="countries" ng-model="country" ng-options="option.name for option in countryOptions track by option.id" multiple>
</select>
<hr> {{country}}
</div>
</div>
I'm new on Angular, and i'm pretty stuck on a simple select problem.
i did a simple select which iterate my scope to populate the select, but after a user click on an option (which are well created), my select becomes blank with no selection inside, and if i click it again there are no options visible.
below is my code:
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.searchFilterDispatcher = {};
$scope.searchFilterDispatcher.distributionCode = [{
id: 1,
label: 'dist1'
}, {
id: 2,
label: 'dist2'
}];
});
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<select ng-model="searchFilterDispatcher.distributionCode"
ng-options="item as (item.label | uppercase) for item in
searchFilterDispatcher.distributionCode"
class="form-control"
id="distributionCode">
<option >{{'SELECT_A_VALUE' | translate}}</option>
</select>
Any hint?
You should change your ng-model like following. It works in snippet
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.searchFilterDispatcher = {};
$scope.searchFilterDispatcher.distributionCode = [{
id: 1,
label: 'dist1'
}, {
id: 2,
label: 'dist2'
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="val" ng-options="item as (item.label | uppercase) for item in searchFilterDispatcher.distributionCode" class="form-control" id="distributionCode">
</select>
</div>
var demoApp = angular.module('myApp', []);
demoApp.controller('QaController', function($scope, $http) {
$scope.loopData = [{}, {}];
$scope.questions = {
model: null,
availableOptions: [
{id: '1', name: 'What is your childhood name?'},
{id: '2', name: "What is your first school?"},
{id: '3', name: "What is your first job place?"},
{id: '4', name: "What is your pet name?"}
]
};
$scope.submit = function() {
$scope.result = $scope.loopData;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div class="wrapper wrapper-content middlealigen col-sm-12" ng-controller="QaController">
<form ng-submit="submit();">
<div ng-repeat="x in loopData">
<h5>Q. {{$index + 1}}</h5>
<select class="form-control" name="question-drop" id="question_dropdown" ng-model="x.question" ng-options="option.id as option.name for option in questions.availableOptions">
<option value="">Select Question</option>
</select>
<input type="text" placeholder="Enter Answer" name="answer" class="form-control" ng-model="x.answer" />
<div class="m-b"></div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<div ng-if="result">
<pre>{{result | json}}</pre>
</div>
</div>
</body>
Can you please check my code snippet. Here is two dropdown.
If I select What is your childhood name? from Q. 1 dropdown then this option should be disabled in the Q. 2 dropdown. How can I do that?
var demoApp = angular.module('myApp', []);
demoApp.controller('QaController', function($scope, $http) {
$scope.loopData = [];
$scope.loopData = [{
model: null,
question : "",
availableOptions: [
{id: '1', name: 'What is your childhood name?',disable : false},
{id: '2', name: "What is your first school?",disable : false},
{id: '3', name: "What is your first job place?",disable : false},
{id: '4', name: "What is your pet name?",disable : false}
]
},{
model: null,
question : "",
availableOptions: [
{id: '1', name: 'What is your childhood name?',disable : false},
{id: '2', name: "What is your first school?",disable : false},
{id: '3', name: "What is your first job place?",disable : false},
{id: '4', name: "What is your pet name?",disable : false}
]
}]
$scope.changItem = function(index,_id){
$scope.loopData = $scope.loopData.map(function(obj,i){
debugger
if(i > index){
obj.availableOptions.map(function(item){
if(item.id == _id ){
item.disable = true
}else{
item.disable = false
}
return item
})
}else{ debugger
obj.availableOptions.map(function(item){
debugger
if(item.id == _id ){
item.disable = true
}else{
item.disable = false
}
return item
})
}
return obj
});
}
$scope.submit = function() {
$scope.result = $scope.loopData;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div class="wrapper wrapper-content middlealigen col-sm-12" ng-controller="QaController">
<form ng-submit="submit();">
<div ng-repeat="x in loopData track by $index">
<h5>Q. {{$index + 1}}</h5>{{x.modelVal}}
<select
ng-change="changItem($index,x.question)" ng-model="x.question" >
<option value="">Select Question</option>
<option ng-disabled="option.disable" ng-repeat="option in x.availableOptions" value="{{option.id}}">{{option.name}}</option>
</select>
<input type="text" placeholder="Enter Answer" name="answer" class="form-control" ng-model="x.answer" />
<div class="m-b"></div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<div ng-if="result">
<pre>{{result | json}}</pre>
</div>
</div>
</body>
You might create a custom filter to be more generic (for more select inputs).
The filter could be:
.filter('excludeEqualAnswers', function() {
return function(input, index, selectedQuestions) {
if (!selectedQuestions[index].question) {
function notExistInSelectedQuestions(output) {
return !selectedQuestions.map(val => val.question).includes(output.id);
}
return input.filter(notExistInSelectedQuestions);
} else {
return input
}
}
})
Then you can filter the options of your select input based upon your custom filter like this:
<select class="form-control" name="question-drop" id="question_dropdown" ng-model="x.question" ng-options="option.id as option.name for option in questions.availableOptions | excludeEqualAnswers:$index:loopData">
<option value="">Select Question</option>
</select>
Here's a working fiddle
I'm sure I must be doing this wrong, but:
I have an object that stores the id of an item. I also have an array of these items. I need to have a 'select' that represents the currently selected item, but that can also change the selected item.
I have set the 'select's model to the object.selectId.
The 'select' ng-options is "option.Text for option in options track by optionId"
Yet the model and 'select' options types don't match
How do I achieve what I need?
Here's a fiddle of what I am doing: https://jsfiddle.net/vb2xe1mc/5/
Code:
<script>
angular.module('myApp', [])
.controller('myctrl', ['$scope', function($scope) {
$scope.item = {
id: 1
};
$scope.options = [
{Text: "zero", Id: 0},
{Text: "one", Id: 1},
{Text: "two", Id: 2},
{Text: "three", Id: 3}
];
$scope.selectChange = function() {
alert($scope.item.id);
};
}]);
</script>
<div ng-app="myApp">
<div ng-controller="myctrl">
<select ng-model="item.id" ng-options="option.Text for option in options track by option.Id" ng-change='selectChange()'>
</select>
</div>
</div>
If you can, please let me know where I have gone wrong or correct the fiddle.
Thanks ^_^
Andy
Clarification:
The model item has id 1 already selected. I need the list to preselect the option with id 1 in this case. Also, When the option is selected it does not set the item.id to an int, rather it sets it to the entire option item. I need it to set the item.id to the option.Id
<select ng-model="item.id" ng-options="option.id as option.Text for option in options" ng-change='selectChange()'>
You want to select option.id, not option and track by is unnecessary.
Bind the select to ng-model="item", not ng-model="item.id".
Also decide on id vs. Id
<div ng-app="myApp">
<div ng-controller="myctrl">
<select ng-model="item" ng-options="option.Text for option in options track by option.Id" ng-change='selectChange()'>
</select>
</div>
</div>
angular.module('myApp', [])
.controller('myctrl', ['$scope', function($scope) {
$scope.item = {
Id: 1
};
$scope.options = [{
Text: "zero",
Id: 0
}, {
Text: "one",
Id: 1
}, {
Text: "two",
Id: 2
}, {
Text: "three",
Id: 3
}, ];
$scope.selectChange = function() {
console.log ($scope.item.Id)
alert($scope.item.Id);
};
}]);
See here for a fixed version: https://jsfiddle.net/ax3k418p/
https://jsfiddle.net/vb2xe1mc/10/
You need to bind item to ng-model, and inititally $scope.Id should be set to 1 not $scope.id = 1
Also check when you alert it should be alert($scope.item.Id);
<div ng-app="myApp">
<div ng-controller="myctrl">
<select ng-model="item" ng-options="option.Text for option in options" ng-change='selectChange()'>
</select>
</div>
</div>
JS:
angular.module('myApp', [])
.controller('myctrl', ['$scope', function($scope) {
$scope.item = {
Id: 1
};
$scope.options = [{
Text: "zero",
Id: 0
}, {
Text: "one",
Id: 1
}, {
Text: "two",
Id: 2
}, {
Text: "three",
Id: 3
}, ];
$scope.selectChange = function() {
alert($scope.item.Id);
};
}]);
I want to watch kendo multiselect value change with angular $watch, but it does not work.
Is there something wrong in my code. How can I fix it?
code as follows (or jsbin)
The value A change stop watch after first invoke.
<body ng-app="myapp">
<div ng-controller="mycontroller">
ValueA :{{ ValueA }} , Change count: {{ valueAChangeCnt }}<br />
<div multiple="multiple"
kendo-multi-select
data-placeholder="Select attendees..."
k-data-text-field = "'name'",
k-data-value-field = "'index'",
k-data-source='dsA'
ng-model='ValueA'
>
</div>
<br />
<br />
ValueB :{{ ValueB }} , Change count: {{ valueBChangeCnt }}<br />
<br />
<select ng-model="ValueB">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
<option value="5">E</option>
<option value="6">F</option>
</select>
</div>
</body>
<script type="text/javascript">
var MyApp = angular.module('myapp', ['kendo.directives']);
function mycontroller($scope) {
$scope.dsA = new kendo.data.DataSource({
data: [
{ name: "A", index: 1 },
{ name: "B", index: 2 },
{ name: "C", index: 3 },
{ name: "D", index: 4 },
{ name: "E", index: 5 },
{ name: "F", index: 6 }
]
});
$scope.valueAChangeCnt = 0;
$scope.$watch('ValueA', function() {
console.log('ValueA Changed');
$scope.valueAChangeCnt++;
});
$scope.valueBChangeCnt = 0;
$scope.$watch('ValueB', function() {
console.log('ValueB Changed');
$scope.valueBChangeCnt++;
});
}
mycontroller.$inject = ['$scope'];
</script>
Insert true after $watch listener function:
$scope.$watch('ValueA', function() {
console.log('ValueA Changed');
$scope.valueAChangeCnt++;
}, true);
This will compare object for equality rather than for reference. From AngularJS API