I am trying to loop through a nested object and use a checkbox to toggle the attribute. I am using nested ng-repeat statements. The data displays fine but when I go to save the data, it turns out its not actually modifying the ng-model like it normally would. Is there something that I am missing here?
Here is the HTML:
<div class="settings-container">
<div ng-repeat="(key, category) in vm.graphSettings">
<div class="row">
<div class="col-xs-12">
<h3>{{ key | titleCase }}</h3>
</div>
</div>
<div class="row">
<div class="col-lg-8 col-md-10 col-xs-12">
<div class="row select-row">
<div class="col-xs-3" ng-repeat="(id, value) in category">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="value">
<div class="pseudo-checkbox"></div>
<span class="input-name">{{ id | titleCase }}</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and here is the object the above vm.graphSettings is reflecting.
graph: {
general: {
showLegend: false,
showNullValues: false,
showTitle: false,
},
xAxis: {
showLabel: false,
showXAxis: true,
dynamicLines: true
},
yAxis: {
showLabel: false,
showYAxis: false
}
}
The ng-model should be the name of a model property, not the value itself:
<div class="settings-container">
<div ng-repeat="(key, category) in vm.graphSettings">
<div class="row">
<div class="col-xs-12">
<h3>{{ key | titleCase }}</h3>
</div>
</div>
<div class="row">
<div class="col-lg-8 col-md-10 col-xs-12">
<div class="row select-row">
<div class="col-xs-3" ng-repeat="(id, value) in category">
<div class="checkbox">
<label>
̶<̶i̶n̶p̶u̶t̶ ̶t̶y̶p̶e̶=̶"̶c̶h̶e̶c̶k̶b̶o̶x̶"̶ ̶n̶g̶-̶m̶o̶d̶e̶l̶=̶"̶v̶a̶l̶u̶e̶"̶>̶
<input type="checkbox" ng-model="category[id]">
<div class="pseudo-checkbox"></div>
<span class="input-name">{{ id | titleCase }}</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Related
(function() {
'use strict';
angular.module('app.core').directive('abrRecText', abrRecText);
function abrRecText() {
return {
restrict: 'E',
scope: {
details: '='
},
controller: recTextController,
controllerAs: 'vm',
templateUrl: 'app/abr/abr-directives/abr-templates/abr-rec-text.html'
};
}
})();
Above code is Custom Directive and below view Section
Inside li i'm getting event on the second load, but directive not getting
Onclick of page number calling api and getting response.
<div class="abr-pagination">
<div class="abr-pagination-wrap">
<div class="abr-pagination-split pull-left">
<paging class="small" page="vm.filterData.paging.currentPageNumber" page-size="vm.filterData.paging.pageSize" total="total" ul-class="pagination rmapp" active-class="active" disabled-class="disabled" adjacent="1" app-name="rm" dots="..." show-prev-next="true" show-first-last="true" hide-if-empty="true" paging-action="vm.pageChanged(page)">
</paging>
</div>
</div>
<div class="col-md-12 nopadding table-show-page pagination">
<div class="col-md-2 nopadding abr-pagination-goto goto-page table-go-to pull-left">
<lable> Go to </lable>
<input type="number" aria-invalid="false" ng-model="vm.filterData.paging.currentPageNumber" ng-change="vm.getTableData()" />
</div>
<div class="col-md-4 nopadding abr-pagination-perpage pagination-per-page table-entries pull-left">
<lable class="pull-left">Entries per page </lable>
<div class="pull-left pagination-select-container">
<select ng-model="vm.filterData.paging.pageSize" ng-options="item for item in vm.selectitems" ng-change="vm.getTableData()"></select>
</div>
</div>
</div>
</div>
</div>
<ul>
<li class="inlineblock" ng-repeat="(key,event) in events.recommendationObj track by $index">
<div class="col-md-12 paddingfive">
<abr-rec-text details="[{'cogKey': 'rectext','cogValue': event.recommendedText },{'cogKey': 'startsAt','cogValue': event.startsAt }, {'cogKey': 'isStory','cogValue':false },{'cogKey': 'widgetMasterId','cogValue':events.widgetMasterId },{'cogKey': 'cardIcId','cogValue':event.cardIcId},{'cogKey': 'attrId','cogValue':attrId},{'cogKey': 'widgetId','cogValue':widgetId}]"></abr-rec-text>
</div>
</li>
</ul>
<div class="abr-pagination">
<div class="abr-pagination-wrap">
<div class="abr-pagination-split pull-left">
<paging class="small" page="vm.filterData.paging.currentPageNumber" page-size="vm.filterData.paging.pageSize" total="total" ul-class="pagination rmapp" active-class="active" disabled-class="disabled" adjacent="1" app-name="rm" dots="..." show-prev-next="true" show-first-last="true" hide-if-empty="true" paging-action="vm.pageChanged(page)">
</paging>
</div>
</div>
<div class="col-md-12 nopadding table-show-page pagination">
<div class="col-md-2 nopadding abr-pagination-goto goto-page table-go-to pull-left">
<lable> Go to </lable>
<input type="number" aria-invalid="false" ng-model="vm.filterData.paging.currentPageNumber" ng-change="vm.getTableData()" />
</div>
<div class="col-md-4 nopadding abr-pagination-perpage pagination-per-page table-entries pull-left">
<lable class="pull-left">Entries per page </lable>
<div class="pull-left pagination-select-container">
<select ng-model="vm.filterData.paging.pageSize" ng-options="item for item in vm.selectitems" ng-change="vm.getTableData()"></select>
</div>
</div>
</div>
</div>
</div>
Initially directive is loading, once I click on the second page of pagination button controller is perform and getting response also but the directive is not performing based on the second response.
Any ideas would be appreciated!
I am new with Angularjs. I want to take user input in my array of the controller
This is the html
<div class="col-md-6">
<div class="row text-center">
<div class="col-xs-6">
<h4> data A:</h4>
</div>
<div class="col-xs-6">
<h4><input type="text" class="form-control" ng-model="a"></h4>
</div>
</div>
<div class="row text-center">
<div class="col-xs-6">
<h4>data B:</h4>
</div>
<div class="col-xs-6">
<h4><input type="text" class="form-control" ng-model="b"></h4>
</div>
</div>
<div class="row btn-primary text-center" ng-click="showData()">
<i class="glyphicon glyphicon-folder-open" aria-hidden="true">
<h4>data</h4>
</i>
</div>
and the controller
$scope.infoSet =[
{
"key" : "data A",
"value" : $scope.a
},
{
"key" : "data B",
"value" : $scope.b
}];
$scope.showData = function () {
console.log($scope.infoSet);
console.log($scope.a);
console.log($scope.b);
}
How can i do that ? i have tried Difficulty with ng-model, ng-repeat, and inputs .
But i cant put the input in proper format with this. please help . thanks in advance
Remove $scope.a and $scope.b, and use
ng-model="infoSet[0].value"
and
ng-model="infoSet[1].value"
Or use ng-repeat
<div class="row text-center" ng-repeat="info in infoSet">
<div class="col-xs-6">
<h4>{{info.key}}</h4>
</div>
<div class="col-xs-6">
<h4><input type="text" class="form-control" ng-model="info.value"></h4>
</div>
</div>
this is my html form that have to use to get the details but when i use the required attribute in the select tag, only the first one is validated and not the second one or an other field after the select tag, for eg if i select option in the first select and click post project then there is no error about the validation, and if i dont select the data from the first select tag there is validation error popup saying that the field is required,
<form name="myForm" role="form" action="#">
<div class="well" style="margin-left:20px; margin-right:20px">
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-lg-12">
<h4 style="color:darkblue">What type of project do you require?</h4>
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-6 col-lg-6">
<select name="drop1" class="form-control" ng-model="project.match1">
<option value="">-- Select Category --</option>
<option ng-repeat="items in serviceCategory" value="{{items.ServiceCategoryId}}">{{items.ServiceCategoryName}}</option>
</select>
</div>
<div class="col-md-6 col-lg-6">
<select class="form-control" ng-model="project.match2" name="drop2">
<option value="">-- Select Sub Category --</option>
<option ng-repeat="a in service" ng-if="a.ServiceCategoryId==project.match1">
{{a.ServiceName}}
</option>
</select>
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
<textarea ng-model="project.ServiceCategories" placeholder="Add Service Categories here" rows="3" style="resize:none; width:100%"></textarea>
</div>
</div>
</div>
<div class="well" style="margin-left:20px; margin-right:20px">
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12 text-left">
<h4 style="color:darkblue">What is your Project about</h4>
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12 text-left">
Describe your Project<br>
</div>
</div>
<div class="row" style="padding-top:10px; margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
<input type="text" ng-model="project.DescribeProject" style="width:100%">
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-6 col-lg-6">
What is your Project about?
</div>
<div class="col-md-6 col-lg-6">
</div>
</div>
<div class="row" style="padding-top:10px; margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
<textarea ng-model="project.AboutProject" ng-trim="false" rows="3" cols="70" ng-maxlength="5000" style="resize:none; width:100%;"></textarea>
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
Attach files
</div>
</div>
<div class="row" style="padding-top:10px; margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
<!--attach file code-->
<div style="height:30px; width:100%;">
</div>
</div>
</div>
<div class="row" style="margin-bottom:15px; margin-left:5px; margin-right:5px">
<div class="col-md-1 col-lg-1"></div>
<div class="col-md-10 col-lg-10">
<div class="text-right">
<button class="btn btn-default btn-primary" type="submit" ng-click="showData(project)">Post Project</button>
<button class="btn btn-default" data-dismiss="modal" aria-label="Close" style="color:black; border-color: #2e6da4">Close</button>
</div>
</div>
<div class="col-md-1 col-lg-1"></div>
</div>
</div>
</form>
The Script is
var app = angular.module("MyApp", []);
app.controller('MainCtrl', function ($scope, $http) {
$http.get('/JsonData/ServiceCategory.json').success(function (response) {
console.log("Service Category Connected");
$scope.serviceCategory = response;
});
$http.get('/JsonData/Service.json').success(function (res) {
console.log("Service Connected");
$scope.service = res;
});
$scope.showData = function (inputData) {
var Project = new Object();
Project.Category = inputData.match1;
Project.SubCategory = inputData.match2;
Project.ServiceCategories = inputData.ServiceCategories;
Project.Description = inputData.DescribeProject;
Project.AboutProject = inputData.AboutProject;
var ProjectJson = JSON.stringify(Project);
alert(ProjectJson);
}
});
In one of my angularjs pages, I am using ngMessages module for form validation. While loading that page I am getting folowing error in console.
"angular.js:9400TypeError: d.setClass is not a function
at render (angular-messages.js:413)"
No idea why. Any help would be appreciated.
here is the HTML
<div class="extranet-content">
<div class="container-list">
<form name="personalForm" ng-submit="personalForm.$valid && saveUsers()" novalidate>
<div class="list-header" ng-show="all_users.length > 0">
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-1">
<h3>
Id
</h3>
</div>
<div class="col-xs-3">
<h3>
Name
</h3>
</div>
<div class="col-xs-3">
Login
</div>
<div class="col-xs-2">
Sign
</div>
<div class="col-xs-2">
password
</div>
<div class="col-xs-12">
<div class="border"></div>
</div>
</div>
</div>
<div class="list-content" ng-class="{ 'noHeader' : !all_users.length }">
<div class="row" ng-show="saveErrors.length > 0" ng-repeat="error in saveErrors track by $index">
<div class="col-xs-12">
</div>
<div class="col-xs-12"></div>
</div>
<div class="row clearfix"
ng-repeat-start="user in all_users = (users | filter: searchUser) | orderBy : predicate:reverse track by $index"
ng-class="{ 'marginTop' : $first}">
<div class="col-xs-1">
</div>
<div class="col-xs-1"></div>
<div class="col-xs-3">
</div>
<div class="col-xs-3">
<input type="text" name="txtLogin" id="txtLogin_{{$index}}" ng-model="user.Login">
</div>
<div class="col-xs-2">
<ng-form name="signForm">
<input maxlength="7" type="text" name="txtSign" id="txtSign_{{$index}}" ng-model="user.Sign"
required>
<span ng-messages="listFormSubmitted && signForm.txtSign.$error" role="alert" class="error">
<span ng-message="required">required</span>
</span>
</ng-form>
</div>
<div class="col-xs-2"></div>
</div>
<div class="row group" ng-repeat-end>
<div class="col-xs-12" ng-if="!$last">
<div class="borderBottom"></div>
</div>
</div>
</div>
</form>
</div>
</div>
For a project at work, I have to use the "bs-tabs" directive in "Angular-Strap".
There are two panels in the implemented page. In the first panel you can choose a customer. Each time after selecting the customer the second select box (address selection) in the bottom panel should be updated with the address which is the main residence of the customer. The problem is that the activeCustomer model does not update and the activeAddress does not update too.
I tried to fix that by updating the model in javascript. This approach updates the second model when you select a customer for the first time but when you change the address in the "address selection" select box there is a bug.
If you change the customer once again the second panel does not update anymore. You can find both explained situations in my jsfiddle example here.
var app = angular.module("myApp", ['mgcrea.ngStrap']);
app.controller('agencyCtrl', ['$scope', function($scope) {
$scope.activeOffice = null;
$scope.activeCustomer = null;
$scope.activeCustomer2 = null;
$scope.activeAddress = null;
$scope.activeAddress2 = null;
$scope.setAddress = function() {
if ($scope.activeCustomer !== null) {
$scope.activeCustomer.addresses.forEach(function(address) {
if ($scope.activeCustomer.main_residence_id === address.address_id) {
$scope.activeAddress = address;
}
});
}
};
$scope.setAddress2 = function() {
//debugger;
$scope.activeCustomer2 = this.aCtrl.customerForm2.customerSelect2.$modelValue;
if ($scope.activeCustomer2 !== null) {
$scope.activeCustomer2.addresses.forEach(function(address) {
if ($scope.activeCustomer2.main_residence_id === address.address_id) {
$scope.activeAddress2 = address;
}
});
}
};
$scope.setAddress3 = function() {
if ($scope.activeCustomer3 !== null) {
$scope.activeCustomer3.addresses.forEach(function(address) {
if ($scope.activeCustomer3.main_residence_id === address.address_id) {
$scope.activeAddress3 = address;
}
});
}
};
$scope.customer = [{
"name": "Dominik Mustermann",
"main_residence_id": "2",
"addresses": [{
"address_id": "1",
"name": "Cologne / Germany",
"city": "Cologne",
"country": "Germany",
}, {
"address_id": "2",
"name": "Rome / Italy",
"city": "Rome",
"country": "Italy"
}]
}, {
"name": "Joe Bloggs",
"main_residence_id": "3",
"addresses": [{
"address_id": "3",
"name": "Berlin / Germany",
"city": "Berlin",
"country": "Germany",
}, {
"address_id": "4",
"name": "New York / Usa",
"city": "New York",
"country": "Usa"
}]
}];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.9/angular-strap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.9/angular-strap.tpl.js"></script>
<div class="container col-xs-4", ng-controller="agencyCtrl">
<p style="padding-top: 20px">
First try <span style="color: red">Not working! </span>When I use the bs-tabs directive from angular-strap there is a bug when updating the second select box (address selection). I know that this is because the
"activeCustomer" model does not update
<p>
<hr>
<bs-tabs>
<bs-pane title='Customer Info'>
<div class="col-xs-12" style="padding-top: 20px">
<form name="customerForm" ng-submit="">
<div class="row">
<div class="form-group">
<label>Customer select box</label>
<select class="form-control" name="customerSelect" ng-model="activeCustomer" ng-change="setAddress()" ng-options="customer as customer.name for customer in customer">
<option value="">Please choose a Customer</option>
</select>
</div>
</div>
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Customer personal info</h4>
</div>
<div class="panel-body">
<div class="form-group">
<label>Name</label>
<input class="form-control" name="name" ng-model="activeCustomer.name">
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" style="cursor: pointer">
<h4 class="panel-title">Address select box</h4>
</div>
<div class="panel-body">
<label>Address selection</label>
<select class="form-control" name="addressSelect" ng-options="address as address.name for address in activeCustomer.addresses" ng-model="activeAddress">
<option value="">Please choose an address</option>
</select>
<div class="form-group">
<label>city</label>
<input class="form-control" name="city" ng-model="activeAddress.city">
</div>
<div class="form-group">
<label>country</label>
<input class="form-control" name="country" ng-model="activeAddress.country">
</div>
</div>
</div>
</div>
</form>
</div>
</bs-pane>
<bs-pane title="Empty" disabled="true"></bs-pane>
</bs-tabs>
</div>
<div class="container col-xs-4", ng-controller="agencyCtrl as aCtrl">
<p style="padding-top: 20px">
Second try <span style="color: red">Not working too! </span>Tried to fix the problem with the "activeCustomer" model. But still not working perfectly
<p>
<hr>
<bs-tabs>
<bs-pane title='Customer Info'>
<div class="col-xs-12" style="padding-top: 20px">
<form name="aCtrl.customerForm2" ng-submit="">
<div class="row">
<div class="form-group">
<label>Customer select box</label>
<select class="form-control" name="customerSelect2" ng-model="activeCustomer2" ng-change="setAddress2()" ng-options="customer2 as customer2.name for customer2 in customer">
<option value="">Please choose a Customer</option>
</select>
</div>
</div>
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Customer personal info</h4>
</div>
<div class="panel-body">
<div class="form-group">
<label>Name</label>
<input class="form-control" name="name2" ng-model="activeCustomer2.name">
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" style="cursor: pointer">
<h4 class="panel-title">Address select box</h4>
</div>
<div class="panel-body">
<label>Address selection</label>
<select class="form-control" name="addressSelect2" ng-options="address2 as address2.name for address2 in activeCustomer2.addresses" ng-model="activeAddress2">
<option value="">Please choose an address</option>
</select>
<div class="form-group">
<label>city</label>
<input class="form-control" name="city2" ng-model="activeAddress2.city">
</div>
<div class="form-group">
<label>country</label>
<input class="form-control" name="country2" ng-model="activeAddress2.country">
</div>
</div>
</div>
</div>
</form>
</div>
</bs-pane>
<bs-pane title="Empty" disabled="true"></bs-pane>
</bs-tabs>
</div>
<div class="container col-xs-4", ng-controller="agencyCtrl">
<p style="padding-top: 20px"><span style="color: blue">Working example for comparison! </span>When I do not use the bs-tabs directive, then my example works as expected.
<p>
<hr>
<div class="col-xs-12" style="padding-top: 20px">
<form name="customerForm3" ng-submit="">
<div class="row">
<div class="form-group">
<label>Customer select box</label>
<select class="form-control" ng-model="activeCustomer3" ng-change="setAddress3()" ng-options="customer3 as customer3.name for customer3 in customer">
<option value="">Please choose a Customer</option>
</select>
</div>
</div>
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Customer personal info</h4>
</div>
<div class="panel-body">
<div class="form-group">
<label>Name</label>
<input class="form-control" name="name3" ng-model="activeCustomer3.name">
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" style="cursor: pointer">
<h4 class="panel-title">Address select box</h4>
</div>
<div class="panel-body">
<label>Address selection</label>
<select class="form-control" ng-options="address3 as address3.name for address3 in activeCustomer3.addresses"
ng-model="activeAddress3">
<option value="">Please choose an address</option>
</select>
<div class="form-group">
<label>city</label>
<input class="form-control" name="city3" ng-model="activeAddress3.city">
</div>
<div class="form-group">
<label>country</label>
<input class="form-control" name="country3" ng-model="activeAddress3.country">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
I would be happy if you could tell me how to solve the problem with updating the model.
I hope I could explain my problem and sorry for my bad written english.