I have this Dropdown list in $dialogScope.items But I tried to call in function selectChange but it doesn't seems to be working. kindly help me notice the mistake
This is from the html part
<div class="form-group has-feedback">
<label class="control-label">Type</label><br/>
<select class="form-control" ng-model="selectedItem" ng-change="selectChange()" ng-options="item as item.name for item in items">
<option value=""> Select Type</option>
</select>
</div>
UPDATED
$scope.addStep = function (patchID) {
$dialog.open({
showClose: false,
closeByEscape: true,
template: 'views/app-edit/app-edit-patch-step-add.html',
controller: ['$scope', function ($dialogScope) {
$dialogScope.items = [{
name:"Download APK",
value:"0",
},{
name:"Backup",
value:"1"
},{
name:"Restore",
value:"2",
},{
name:"Download OBB",
value:"4",
},{
name: "Download OBB By GPU",
options : ["Adreno","Mali","Tegra","PowerVR","Other"]
},{
name: "Download APK By GPU",
options : ["Adreno","Mali","Tegra","PowerVR","Other"]
},{
name: "Download CACHE",
value:"7",
},{
name: "Download CACHE By GPU",
value:"8",
},{
name: "Download CACHE & Unzip After Install",
value:"9",
},{
name: "Download CACHE By GPU & Unzip After Install",
value:"10",
},
];
$dialogScope.hideMe = function(hideElements){
if($dialogScope.selectedItem){
return (hideElements.indexOf($dialogScope.selectedItem.name) != -1)?false:true;
}
else{
return true;
}
}
$dialogScope.selectChange = function(selectedItem){
if (selectedItem.value) {
$dialogScope.type = selectedItem.value;
$dialogScope.labelA = 'dferfre';
$dialogScope.labelB = '';
$dialogScope.labelC = 'MD5';
$dialogScope.stepA = '';
$dialogScope.stepB = '';
$dialogScope.stepC = '';
if (value == 0) {
$dialogScope.labelA = "APK URL";
} else if (value == 4) {
$dialogScope.labelA = "OBB URL";
} else if (value == 5) {
$dialogScope.labelB = "OBB URL";
} else if (value = 6) {
$dialogScope.labelB = "APK URL";
}
$dialogScope.$apply();
}
};
Pass the model into your function. Try this.
<select class="form-control" ng-model="selectedItem" ng-change="selectChange(selectedItem)" ng-options="item as item.name for item in items">
You should change $dialogScope.selectChange to $scope.selectChange and you also forgot to pass the variable to function from ur html. Personally I would prefer to use controllerAs syntax.
Instead of having inline controller function. Create separate controller "MyDialogController" file then replace ur html with the following html.
<div ng-controller="MyDialogController" class="form-group has-feedback">
<label class="control-label">Type</label><br/>
<select class="form-control" ng-model="selectedItem" ng-change="selectChange()" ng-options="item as item.name for item in items">
<option value=""> Select Type</option>
</select>
</div>
Related
I have a problem with ng-options. I can't get rid of the blank option in my ng-options with multi select.
I tried this solutions but this works for single select. Is there any solution for multi select.
HTML
<select ng-model="feed.config" ng-options="item.name for item in configs" multiple>
<!-- <option value="" ng-if="false"></option> works only for single select -->
</select>
JS
$scope.feed = {};
$scope.configs = [{'name': null,'value': 'config1'},
{'name': 'Config 2', 'value': 'config2'},
{'name': 'Config 3','value': 'config3'}
];
Fiddle
A pure CSS solution is to use :empty pseudo-class to hide the empty options:
select option:empty {
display:none;
}
:empty MDN reference:
The :empty CSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace). Comments or processing instructions do not affect whether an element is considered empty or not.
You can filter configs which exclude null data and then use it to bind ngOption
$scope.getConfigs = function () {
return $scope.configs.filter(function (x) {
return x.name != null;
})
}
HTML
<select ng-model="feed.config" ng-options="item.name for item in getConfigs()" multiple>
</select>
var MyApp = angular.module('MyApp1', [])
MyApp.controller('MyController', function($scope) {
$scope.feed = {};
$scope.configs = [{
'name': null,
'value': 'config1'
}, {
'name': 'Config 2',
'value': 'config2'
}, {
'name': 'Config 3',
'value': 'config3'
}];
$scope.getConfigs = function() {
return $scope.configs.filter(function(x) {
return x.name != null;
})
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp1">
<div ng-controller="MyController">
<select ng-model="feed.config" ng-options="item.name for item in getConfigs()" multiple>
</select>
<br> {{feed.config}}
</div>
</div>
You can also create a filter
var MyApp = angular.module('MyApp1', []);
MyApp.filter('notNull', [function() {
return function(object) {
var array = object.filter(function(x) {
return x.name != null;
})
return array;
};
}])
MyApp.controller('MyController', function($scope) {
$scope.feed = {};
$scope.configs = [{
'name': null,
'value': 'config1'
}, {
'name': 'Config 2',
'value': 'config2'
}, {
'name': 'Config 3',
'value': 'config3'
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp1">
<div ng-controller="MyController">
<select ng-model="feed.config" ng-options="item.name for item in configs | notNull " multiple>
</select>
<br> {{feed.config}}
</div>
</div>
check this it will work
<select id="feed" ng-model="feed.config" >
<option ng-repeat="config in configs " value="{{config.name}} || Null" ng-bind="config.name"></option>
</select>
add css
select option:empty {
display:none;
}
or without css
check this fiddle http://jsfiddle.net/ADukg/16750/
I tried all of the way I found but it's not working, I am just simply trying to get selected option of a dropdown on its change event in angular js way so that it would be passed to the ajax and fetch the data from database. I have angular.min.js 1.4.8 version cdn in my project.
I copy/paste my code into plunker there its working fine but while running my project in browser its not working. Below is my JS and html code snippet.
JS Code
$scope.inputs = [{
id : 1,
name : 'option1',
value : 'option1',
inputType : 'tag',
valueOperator : "option1Operator",
operatorType : 'operatorType1'
}, {
id : 2,
name : 'option2',
value : 'option2',
inputType : 'text',
valueOperator : "option2Operator",
operatorType : 'operatorType1'
}];
$scope.inputSelectedChange = function(){
$scope.$watch('inputSelected',function( val ){
$http({
method: 'GET',
url: '<<URL>>',
responseType: 'json',
params:{inputName: "prdSeqId"}
}).then(function successCallback(response) {
//something
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
});
HTML Code
<select ng-model="inputSelected"
ng-options="input as input.name for input in inputs"
ng-change="inputSelectedChange()" required>
<option value="">Select Input</option>
</select>
//html
<select ng-model="inputSelected" id="inputSelected" class="form-control positionTypes" ng-options="input as input.name for input in inputs" ng-change="inputSelectedChange(inputSelected)" required>
<option value="">Select Input</option>
</select>
//controller
$scope.inputSelectedChange = function(value){
console.log(value)
};
try changing function like below:
and get value.
$scope.inputSelectedChange = function(){
console.log($scope.inputSelected)
//do other stuff here
}
You can get the value of selected item inside ng-change from ng-model
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.inputs = [{
id : 1,
name : 'option1',
value : 'option1',
inputType : 'tag',
valueOperator : "option1Operator",
operatorType : 'operatorType1'
}, {
id : 2,
name : 'option2',
value : 'option2',
inputType : 'text',
valueOperator : "option2Operator",
operatorType : 'operatorType1'
}];
$scope.inputSelectedChange = function(){
console.log($scope.inputSelected)
}
}
<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="inputSelected" id="inputSelected" class="form-control positionTypes" ng-options="input as input.name for input in inputs" ng-change="inputSelectedChange()" required>
<option value="">Select Input</option>
</select>
</div>
I use angular-ui-select2.
<select ui-select2 ng-model="vm.salonStaffModel.type">
<option ng-repeat="occ in vm.categoriesType" value="{{occ.key}}">
{{occ.key}}</option>
</select>
I bind data to vm.salonStaffModel.type successfully, when I select value from dropdown list. But when I refresh page, the value is undefined, although vm.salonStaffModel.type has value, which I have selected before. Thanks!
This is my controller
export default class SalonStaffCreateCtrl {
constructor($state, SalonStaff, SalonListService, popUpMessageService) {
this.submitted = false;
this.popUpMessageService = popUpMessageService;
this.salonListService = SalonListService;
this.salonStaffModel = {
type:"AUS"
};
this.SalonStaff = SalonStaff;
this.state = $state;
this.yesNoLazylist = [{ "key": false, "group": null }, { "key": true, "group": null }];
this.categoriesType = [{"key":"AUS","group":null,"$$hashKey":"object:259"},{"key":"BD","group":null,"$$hashKey":"object:260"},{"key":"735","group":null,"$$hashKey":"object:261"},{"key":"713","group":null,"$$hashKey":"object:262"},{"key":"714","group":null,"$$hashKey":"object:263"},{"key":"IND","group":null,"$$hashKey":"object:264"},{"key":"734","group":null,"$$hashKey":"object:265"},{"key":"711","group":null,"$$hashKey":"object:266"},{"key":"716","group":null,"$$hashKey":"object:267"},{"key":"731","group":null,"$$hashKey":"object:268"},{"key":"BUR","group":null,"$$hashKey":"object:269"},{"key":"NZ","group":null,"$$hashKey":"object:270"},{"key":"PK","group":null,"$$hashKey":"object:271"},{"key":"733","group":null,"$$hashKey":"object:272"},{"key":"SGP","group":null,"$$hashKey":"object:273"},{"key":"717","group":null,"$$hashKey":"object:274"},{"key":"T","group":null,"$$hashKey":"object:275"},{"key":"USA","group":null,"$$hashKey":"object:276"},{"key":"725","group":null,"$$hashKey":"object:277"}];
this.categoriesService = [];
this.getServiceSalon();
}
}
SalonStaffCreateCtrl.$inject = ['$state', 'SalonStaff', 'SalonListService', 'popUpMessageService'];
<div class="form-group">
<label>Type *</label>
<select ui-select2 ng-model="vm.salonStaffModel.type">
<option ng-repeat="occ in vm.categoriesType" value="{{occ.key}}">
{{occ.key}}</option>
</select>
<p ng-show="frm.type.$error.required && vm.submitted" class="red-text error-label-dropdown">Mandatory field(s)</p>
</div>
<select ng-model="ad.Categorie"
ng-options="obj.id as obj.name for obj in categories"
ng-change="getSubcategories()"
class="form-control"
ng-required="true"
name="categorie">
<option value="">-- --</option>
</select>
When i submit getting ng-options array index instead of ad.Categorie value and i solved with hidden input
<input type="hidden" name="categorie" value="#{{ad.Categorie}}" />
but it seems wrong solution any idea?
var categories = [{"id":1,"name":"cat1"},{"id":2,"name":"cat2"}];
reading from database. I want categories id as fk
public function store(Request $request)
{
$ad = new Ad;
$ad->categorie_id= $request->categorie;
$ad->subcategorie_id= $request->subcategorie;
$ad->type_id= $request->type;
$ad->location_id= $request->location;
$ad->title= $request->title;
$ad->description= $request->description;
$ad->price= $request->price;
$ad->phone= $request->phone;
$ad->code= $request->code;
//$ad->img = $request->file('img');
//$files = $request->file('img');
$ad->save();
return redirect('/');
}
is this array $request->categorie that's why i get index?
Your code is already getting right id, I am assuming you want to get object or index. this code is for getting index, id and object:
<select ng-model="ad.Categorie"
ng-options="obj.name for obj in categories"
ng-change="getSubcategories()"
class="form-control"
ng-required="true"
name="categorie">
</select>
In your controller:
function myCtrl($scope) {
$scope.categories = [{
"id": 11,
"name": "name1"
}, {
"id": 22,
"name": "name2"
}];
$scope.ad = {}
$scope.getSubcategories = function() {
console.log("selected object= ", $scope.ad.Categorie);
console.log("selected index= ", $scope.categories.indexOf($scope.ad.Categorie));
console.log("selected id= ",$scope.ad.Categorie.id);
}
}
Here is the working example:
https://jsfiddle.net/U3pVM/30048/
I am using Angular 1.0.8. How do you correctly add compiled form elements? I assume it has to do with how to use $addControl?
Consider this example: http://jsfiddle.net/lesouthern/LB4Tx/
After adding the select in this example, the form becomes valid only if "myInput" is entered, it does not recognize the "required" directive with the appended select.
<div ng-app="pageModule"
ng-controller="parentCtrl">
<script type="text/ng-template" id="myTemplate">
<select name="mySelect"
add-to-form
ng-model="val"
required
ng-options="o.id as o.name for o in options">
<option value="">Select my option...</option>
</select>
</script>
<form name="myForm"
id="myForm"
novalidate
ng-submit="mySubmit()">
<input name="myInput"
ng-model="myInput"
required />
<div id="dest"></div>
<button type="submit">Click me to submit</button>
{{myForm.$invalid}}
</form>
<button ng-click="mkSelect()">create select</button>
</div>
var pageModule = angular.module('pageModule',[])
.controller('parentCtrl',function($scope,$compile) {
$scope.options = [
{ id : "nissan", name: "Nissan" },
{ id : "toyota", name: "Toyota" },
{ id : "fiat" , name: "Fiat" },
{ id : "chevy", name: "Chevy" },
{ id : "honda", name: "Honda" },
{ id : "gmc" , name: "GMC" }
];
$scope.mkSelect = function() {
var dest = angular.element(document.getElementById('dest')),
html = angular.element(document.getElementById('myTemplate')).html().trim();
dest.append($compile(html)($scope));
}
$scope.mySubmit = function() {
console.log('this is my submit');
}
})
.directive('addToForm',function() {
return {
require : ['ngModel'],
controller : function() {},
link : function($scope,$element,$attr,$ctrls) {
var modelCtrl = $ctrls[0];
$scope.myForm.$addControl(modelCtrl);
}
}
});
form.$addControl() was unnecessary. I corrected my compile command and the appended element now is registering with the form controller: http://jsfiddle.net/lesouthern/8CDNc/
$scope.mkSelect = function() {
var dest = angular.element(document.getElementById('dest')),
html = angular.element(document.getElementById('myTemplate')).html().trim();
$compile(html)($scope,function(_element,_scope) {
dest.append(_element);
});
}
In case you didn't need to $compile your html, you can use the ng-show directive to hide the <select> until needed. Notice it is still required
JSFiddle with no $compile
<form>
...
<select name="mySelect" id="multipleSelect" ng-show="mkSelected"
ng-model="data.singleSelect" required>
<button type="submit">Click me to submit</button>
</form>
<button ng-click="mkSelected=true">Create Select</button>