I have written following code in .js file
var appMod = angular.module('appMod',[]);
appMod.controller('domainCtrl', function($scope) {
$scope.admins = [{"type":["Kerberos","Department","Office"],"office":["NA","Bangalore","NY","NJ"]}];
});
Now i want to select an option from a drop down of type and office.
I have written following code in .html
<label for="typeOfAccess" class="col-sm-2 control-label">Type of Access :</label>
<div class="col-sm-1">
<select name="typeOfAccess" data-ng-model="newDomain.typeOfAccess">
<option data-ng-repeat="typeOfAccess in admin.type" value="typeOfAccess">{{typeOfAccess}}</option>
</select>
</div>
Please suggest what to do.
That is not how you defined options for a select in angularjs.
Please check documentation angularjs docs
This is how it should look like:
<label for="typeOfAccess" class="col-sm-2 control-label">Type of Access :</label>
<div class="col-sm-1">
<select name="typeOfAccess"
data-ng-model="newDomain.typeOfAccess"
data-ng-options="typeOfAccess for typeOfAccess in admin.type">
</select>
</div>
Let me know if it works after making those changes.
Try to use ng-value to save selected option .
I had same problem here once: Display details of selected options in Angularjs
$scope.selection = {
typeOfAccess: null
};
<label for="typeOfAccess" class="col-sm-2 control-label">Type of Access :</label>
<div class="col-sm-1">
<select name="typeOfAccess" data-ng-model="newDomain.typeOfAccess">
<div data-ng-repeat="typeOfAccess in admin.type">
<label><option value="typeOfAccess" ng-value="typeOfAccess" ng-model="selection.typeOfAccess"> </label> </option>
</div>
</select>
</div>
Selected campaign: {{ selection.typeOfAccess }}
Related
I have a Angularjs form with a list with names.
When I click on a name the form will change with here profile.
When I change one input and don't save it and I click on a other profile every thing change except the one input that has changed.
<form class="form-horizontal bordered-row" >
<div class="form-group">
<label class="col-sm-4 control-label">Naam</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="" value="{{gegevens.naam | capitalize}}">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Categorie</label>
<div class="col-sm-6">
<select class="form-control">
<option ng-repeat="x in producten_categorie" value="{{x.value}}" ng-selected="gegevens.categorie == x.value">{{x.name}}</option>
</select>
</div>
</div>
<div class="form-group pad25L">
<button class="btn btn-info" ng-click="productAlgemeen_update(gegevens.naam);">Save</button>
</div>
</form>
And the change scope:
$scope.productGegevens = function(product){
$http.post("php/producten-locatie.php", {'id':product.id}).then(function(response){
$scope.producten_locatie = response.data.records[0];
$scope.gegevens = {
id:product.id,
naam:product.naam,
categorie:product.categorie,
straatnaam:$scope.producten_locatie.straatnaam,
huisnummer:$scope.producten_locatie.huisnummer,
postcode:$scope.producten_locatie.postcode,
stadsnaam:$scope.producten_locatie.stadsnaam
};
});
}
Please note that input data needs to bind with ng-model whereas you are entering your input with value tag. it means the value is rendered in html not in model, so when you click on other profile UI can not detect the change. Please use ng-model for input value not value tag of input box.
Not able to add the selected value to the filter in angularjs im getting this error(Error: Unexpected token .)
Inside controller
$scope.search_type_options=[{name:"Name",value:"name"},{name:"Id",value:"id"},{name:"Update By",value:"updated_by"}];
$scope.search_val = function()
{
$scope.fs={$scope.search_type.value:$scope.search_txt};
$scope.filter_dt=$filter('filter')($scope.temp_data,$scope.fs);
}
I need output like
{name:"raj"}
Inside Template
<div class="form-group">
<select name="search_type" ng-model="search_type" ng-options="item as item.name for item in search_type_options">
<option value="">--select search type</option>
</select>
</div>
<div class="form-group">
<input type="text" ng-model="search_txt" class="form-control" placeholder="Search">
</div>
<button type="submit" ng-model="search_btn" ng-click="search_val()"class="btn btn-default">Go</button>
</div>
not sure if this is a correct js syntax
$scope.fs={$scope.search_type.value:$scope.search_txt};
normally it should be written like this
$scope.fs = {};
$scope.fs[$scope.search_type.value] = $scope.search_txt;
I can't find the answer to this over google so i post my question here :
I need to send an http.post request to a php file based on inputs value that I get from a ng-model directive in my view but its located inside a ng-repeat. I must use $index because its from a form that repeat for each line in my database.In simple word it's for update my data base but just the line i'm interested in
But I keep getting the following error
TypeError: Cannot read property '0' of undefined
because my ng-model seems to have another name. Can you explain me how to name a ng-model value in controller with the index so it match the one one the view. Thank's in advance.
Here my code :
<ul>
<li class="err" ng-repeat="error in admin.errors"> {{error}} </li>
</ul>
<ul>
<li class="info" ng-repeat="msg in admin.msgs"> {{msg}} </li>
</ul>
<form class="form-inline" ng-repeat="data in admin.datas track by $index" novalidate ng-submit="admin.modify($index)">
<div class="form-group">
<div class="col-10">
<input class="form-control" type="text" ng-value="data.id" ng-model="admin.id[$index]" id="id">
</div>
</div>
<div class="form-group">
<div class="col-10">
<input class="form-control" type="text" ng-value="data.nom" ng-model="admin.nom[$index]" id="nom">
</div>
</div>
<div class="form-group">
<div class="col-10">
<input class="form-control" type="text" ng-value="data.prenom" ng-model="admin.prenom[$index]" id="prenom">
</div>
</div>
<div class="form-group">
<select class="form-control" id="structure" ng-value="data.structure" ng-model="admin.structure[$index]">
<option value="1">Structure 1</option>
<option value="2">Structure 2</option>
<option value="3">Structure 3</option>
<option value="4">Structure 4</option>
<option value="5">Structure 5</option>
</select>
</div>
<div class="form-group">
<div class="col-10">
<input class="form-control" type="text" id="fonction" ng-value="data.fonction" ng-model="admin.fonction[$index]">
</div>
</div>
<div class="form-group">
<textarea class="form-control" id="message" rows="1" ng-value="data.message" ng-model="admin.message[$index]"></textarea>
</div>
<button type="submit" class="btn btn-primary">Modifier</button>
</form>
my controller :
(function() {
'use strict';
angular
.module('AA')
.controller('adminCtrl', adminCtrl);
function adminCtrl($http){
const admin = this;
/* Parti recup*/
admin.datas = [];
admin.getMsg = function(){
$http.get('/dylan/ActeurAvenir/libs/read.php').then(function(response) {
admin.datas = response.data;
})
}
admin.getMsg();
/* Parti post*/
admin.msgs = [];
admin.errors = [];
admin.modify = function($index){
$http.post('/dylan/ActeurAvenir/libs/modify.php', {
'id' : admin.id[$index],
'nom' : admin.nom[$index],
'prenom' : admin.prenom[$index],
'structure' : admin.structure[$index],
'fonction' : admin.fonction[$index],
'message' : admin.message[$index]
}
).then(function(result) {
if (result.data.msg != '')
{
admin.msgs.push(result.data.msg);
}
else
{
admin.errors.push(result.data.error);
}
})
}
};
adminCtrl.$inject = ['$http'];
})();
Here
$http.post('/dylan/ActeurAvenir/libs/modify.php', {
'id' : admin.id[$index],
'nom' : admin.nom[$index],
'prenom' : admin.prenom[$index],
'structure' : admin.structure[$index],
'fonction' : admin.fonction[$index],
'message' : admin.message[$index]
}
I think you need to access admin.datas[$index].id, admin.datas[$index].nom and so on, since admin.datas is the array
about your ng-model
you should be binding against
ng-model="data.id" which comes from your ng-repeat rather than using admin.datas[$index].id
It is less code, its more declarative, and if you add a filter your code will stop working.
Ok so I find the answer thanks to Gonzalo answer and my own investigation, what You need to do here is to change the http.post() value so it's like
'id' : admin.datas[$index].id, admin.datas[$index].nom and so on
AND change the ng-model in the view so its like :
ng-model="admin.datas[$index].id"
Hope this will help someone in the future.
Here im using Mvc with Angularjs Here im getting Data From database but why dropdown not display vale values this is my Html coding
<div class="form-group">
<div class="row">
<div class="col-md-2 col-sm-2" style="margin-left:20px">
<b>Country</b>
</div>
<div class="col-md-8 col-sm-8">
<select ng-model="CountryID" ng-options="I.CountryID as I.CountryName for I in CountyList" ng-change="GetStates()">
<option value="">Country</option>
</select>
</div>
</div>
</div>
angular code
function Getcountrys(){
var ddd = Mysercive.BindCntryList();
ddd.then(function (d) {
$scope.CountyList = d.data;
})
}
Where are u calling your Getcountrys() function?
Try call it when page will load via
<div ng-init="Getcountrys();">
at your template, or any other way.
Understand?
I have created one dropdown by using rest API in angular JS.
<div class="form-group">
<label for="address" class="col-lg-4 col-md-4 col-sm-4 control-label">Country</label>
<div class="col-lg-7 col-md-7 col-sm-7 col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
<select ng-model="selectCountry" class="selectpicker" ng-options="item.name for item in countryList">
<option value="">Select Country</option>
</select>
</div>
</div>
My controller
angular.module('myWebApp').controller('signInController',function ($scope){
alert("sign clicked" + $scope.selectCountry);
});
But my '$scope.selectCountry' is showing [object] [object]. Please help.
I can't see what your countryList array looks like but your ng-options most likely needs to be:
item.countryId as item.name for item in countryList
value / name / entry / array
So in your case, since you didn't specify the value, the value became the whole object.
https://docs.angularjs.org/api/ng/directive/select