Develop Reference

Angular Js push to array from dynamic ng-repeat directive to a controller

I need a big favor. I have this ng-repeat directive
appTitan.directive('questionsAnswers', function() {
return {
restrict: 'E',
templateUrl: '/js/directives/questionsAnswers.html',
replace: true,
scope: {
questions: '=',
chosenAnswersArr: '='
},
link: function(scope) {
scope.chosenAnswers = function(selection) {
scope.chosenAnswersArr.push(selection);
};
}
};
});
And this is used accordingly in the template
<div class="question-answers__item__wrapper">
<div class="question-answers__item__question">
<h3>{{ questions.questionName }}</h3>
</div>
<div class="question-answers__item__answers">
<ul class="row">
<li class="col-sm-6" data-answer-item-id="{{questions.answerOne.isCorrect}}" ng-click="chosenAnswers(questions.answerOne.isCorrect)">
<p>{{questions.answerOne.value}}</p>
</li>
<li class="col-sm-6" data-answer-item-id="{{questions.answerTwo.isCorrect}}" ng-click="chosenAnswers(questions.answerTwo.isCorrect)">
<p>{{questions.answerTwo.value}}</p>
</li>
<li class="col-sm-6" data-answer-item-id="{{questions.answerThree.isCorrect}}" ng-click="chosenAnswers(questions.answerThree.isCorrect)">
<p>{{questions.answerThree.value}}</p>
</li>
<li class="col-sm-6" data-answer-item-id="{{questions.answerFour.isCorrect}}" ng-click="chosenAnswers(questions.answerFour.isCorrect)">
<p>{{questions.answerFour.value}}</p>
</li>
</ul>
</div>
</div>
and added in HTML like this
<li class="question-answers__item" ng-repeat="questions in quizData.questionAndAnswers" elem-height>
<questions-answers questions="questions" chosenAnswersArr="chosenAnswersArr"></questions-answers>
</li>
I have this chosenAnswer ng-click function in my template.
Here's my controller
appTitan.controller('MainController', ['$scope', '$http', '$location', function($scope, $http, $location) {
'use strict';
//Generate scores
$scope.chosenAnswersArr = [];
}]);
I am unable to push data from directive to the controller. What is that I have to do to make it work.
The error I'm getting is
angular-1.4.8.min.js:107 TypeError: Cannot read property 'push' of undefined
I did try adding the controller property(MainController) to the directive but it was breaking the data. Please note that the data is pulled using the same controller using $http.get(I didn't add that line here). I am mentioning this because to let you know that the data is dynamic.
How can I push a data from my directive to the controller?

How to make href in button inside collapse

I have a collapsed model which show more information about client, and insid it, I have a button, when I click, I don't get the informations of the specific client, I get data of all clients
<ion-list ng-repeat="x in names">
<a class="item item-icon-left " >
<i class="icon ion-android-arrow-dropdown-circle" ng-model="collapsed" ng-click="collapsed=!collapsed"></i>
{{x.Marque}}
</a>
<div ng-show="collapsed">
<table>
<thead >
<td>
<label> Code: </label> {{x.CodeClient}} <br/>
<label> Nom: </label> {{x.NomClient}} <br/>
<a class="button button-info" ui-sref="modifClient({CodeClient: x})" >
Enregistrer
</a>
...
app.js
$stateProvider.state('modifClient', {
url: '/modifClient',
templateUrl: 'templates/modifClient.html',
params: {CodeClient: null},
controller: 'ConsultClientCtrl'
});
app.controller("ConsultClientCtrl", function($scope, $http) {
$scope.loadClient = function(){
$http.get("http://localhost/deb/debut.php")
.success(function(data){
$scope.names = data;
});
}
});
modifClient.html
<ion-content class="padding" ng-controller="ConsultClientCtrl" ng-repeat="x in names | filter: {CodeClient: thisX}" >
<ion-list ng-repeat="x in names | filter: {CodeClient: thisX}: true">
<div class="item item-divider center-text" ng-model="CodeClient"> {{x.CodeClient}} </div>
......

You have to use the framework's href: ngHref or ng-click
<a class="button button-info" ng-href="/modifClient"> ...
LE: I've created a pen for this case. The problem is that you have an <a> in <a> and when you click it then it get's confused.
So I've changed the <a ng-show="collapsed"> to <div ng-show="collapsed"> and now works as expected (see pen too).

If you are using Angular ui-router and modifClient is a state in your router, you better use the Angular ui-sref attribute instead of HTML href.
Your code would be :
<a class="button button-info" ui-sref="modifClient">
Edit:
If you want to pass an object param in the ui-sref you can do it like this:
<a class="button button-info" ui-sref="modifClient({CodeClient: x.CodeClient})">
And change your state settings to include a params object:
$stateProvider.state('modifClient', {
url: '/modifClient',
templateUrl: 'templates/modifClient.html',
params: {CodeClient: null},
controller: 'ConsultClientCtrl'
});
Note:
Note that you should also update your ConsultClientCtrl controller with a $scope.CodeClient variable so it can be updated from the ui-sref.
You can read How to pass parameters using ui-sref in ui-router to controller for further options.
Edit 2:
After reading your last Edit, I can see that you don't have a CodeClient variable in your controller, so update it like this:
app.controller("ConsultClientCtrl", function($scope, $http) {
$scope.CodeClient = null;
$scope.loadClient = function(){
$http.get("http://localhost/deb/debut.php")
.success(function(data){
$scope.names = data;
});
}
});
And in your HTML just use:
<div class="item item-divider center-text"> {{CodeClient}} </div>
Without <ion-list ng-repeat ...> and the filter part as we already got the CodeClient variable in the Controller.

Thanks for every one,This is the solution I found:
change the code of the button:
<a class="button button-info" ng-href="#/modifClient/{{x.CodeClient}}" >
Enregistrer </a>
And in app.js, I had to use $state:
app.controller("ConsultClientCtrl", function($scope, $http,$state) {
$scope.loadClient = function(){
$http.get("http://localhost/deb/selectClient.php")
.success(function(data){
$scope.thisX = $state.params.CodeClient;
$scope.names = data;
});
}
});
And changing the state provider to this:
$stateProvider.state('modifClient', {
url: '/modifClient/:CodeClient',
templateUrl: 'templates/modifClient.html',
controller: 'ConsultClientCtrl'
});

ng-repeat not working in UIKIT dropdown

i have uikit dropdown template in which i am trying add ng-reapet but drop down not working.
guys please help .....
<div class="uk-button-dropdown" uk-dropdown="{mode:'click'}">
<button class="md-btn">Click me <i class="material-icons"></i></button>
<div class="uk-dropdown">
<ul class="uk-nav uk-nav-dropdown">
<li ng-repeat="item in locationName">
{{item}}
</li>
</ul>
</div>
</div>
module
var addlocationModule = angular.module('addLocationApp', ['ngDialog']);
addlocationModule.controller('addLocationController', function ($scope, $http, $window, ngDialog) {
$scope.initialize = function(alllocation,loggedInEmployee)
{
$scope.alllocations = alllocation;
$scope.loggedInEmployee = loggedInEmployee;
$scope.locationName = [];
$scope.alllocations.forEach(function(resource) {
$scope.locationName.push(resource.title);
});
}
$scope.addLocations = function() {
$http.post('/addLocationName',$scope.location).then(function successCallback(response) {
if(response.data.status){
$scope.alllocations.push(response.data.location);
$scope.location.name="";
$scope.location.description="";
}
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
})
}
});

you should add ng-repeat in ul tag
<ul class="uk-nav uk-nav-dropdown" ng-repeat="item in locationName">
<li>
{{item}}
</li>
</ul>
i think it'll help you.

ng-repeat throwing invalid Expression

I'm a total angular noob and trying to create a simple test app where. I'd like to read out some userdata in a partial. The user data is in my event controller. I assign the event controller to a form in my new.html partial after navigating to #/new via a route controller.
The error I get when trying to loop through the users in my partial is "Error: ngRepeat:iexp Invalid Expression". I can't figure out how to ng-repeat through those users.
Any thoughts?
My index.html:
<div class="container" style="width: 500px; margin: 0 auto;">
<ul class="nav nav-pills" ng-controller="NavigationController as navigationCtrl">
<li ng-class="{active: navigationCtrl.isActive(1)}">
Home
</li>
<li ng-class="{active: navigationCtrl.isActive(2)}">
Nieuw
</li>
<li ng-class="{active: navigationCtrl.isActive(3)}">
Nog een
</li>
</ul>
<div ng-view></div>
</div>
My new.html partial
<form action="" ng-controller="EventController as event">
<div ng-repeat="users as user">
<label>Name</label>
<input type="text" class="form-control" name="name" ng-model="user.name">
<br>
<label>Emailaddress</label>
<input type="email" class="form-control" name="email" ng-model="user.email">
<br>
<input class="btn btn-default" type="submit" ng-click="event.addEvent($event)" value="Klik">
</div>
</form>
And last: My angular code
(function () {
var app = angular.module('testApp', ['ngRoute']);
app.controller('NavigationController', ['$scope', '$route', function ($scope, $route) {
$scope.$route = $route;
this.activeTab = 1;
this.setActiveTab = function (tab) {
this.activeTab = tab;
};
this.isActive = function (tab) {
if ($route.current && $route.current.activeTab) {
return $route.current.activeTab === tab;
}
return false;
};
}]);
app.controller('EventController', ['$scope', '$controller', function ($scope, $controller) {
this.users = [
{name: 'aa'},
{name: 'bb'}
];
this.addEvent = function (e) {
e.preventDefault();
console.log(this);
};
}]);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/new', {
templateUrl: 'partials/new.html',
controller: 'NavigationController',
activeTab: 2
}).
when('/another', {
templateUrl: 'partials/another.html',
controller: 'NavigationController',
activeTab: 3
}).
otherwise({
redirectTo: '/',
controller: 'NavigationController',
activeTab: 1
});
}]);
})();
I've tried changing this for $scope to no avail.

You write ng-repeat in wrong way in your new.html partial page
it should be like
new.html
<div ng-repeat="user in users">

Correct syntax for ng-repeat is
<element ng-repeat="item in [1,2,3]">
Also you can use things like track by $index if you have duplicated values in your collection like [1,1,1].
Ref. https://docs.angularjs.org/api/ng/directive/ngRepeat

There are few issues in your code. Please change all this references to $scope and then quickly fix below html code:
<div ng-repeat="user in users">
It should work but update me otherwise also.
Working demo for your reference (route codes excluded for demo purpose only)
thanks,
Ashok

you have not written ng-repeat in right way change it to:
<div ng-repeat="user in users">

Angular JS - {{ }} not working but data-ng-bind display the scope

I've an issue with Angular JS. I don't get why my data in the scope can't be displayed with the {{ }} but can be display if I use the directive : data-ng-bind.
If anyone has an idea :
Here's my HTML Code :
<aside id="sidebar-left" class="sidebar-left" data-ng-controller="PortalController" data-ng-init="getAppslist()">
<div class="sidebar-header">
<div class="sidebar-title">
Navigation
</div>
<div class="sidebar-toggle hidden-xs" data-toggle-class="sidebar-left-collapsed" data-target="html" data-fire-event="sidebar-left-toggle">
<i class="fa fa-bars" aria-label="Toggle sidebar"></i>
</div>
</div>
<div class="nano" >
<div class="nano-content">
<nav id="menu" class="nav-main" role="navigation">
<ul class="nav nav-main">
<li class="nav-active">
<a href="#!/">
<i class="fa fa-home" aria-hidden="true"></i>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="#!/users">
<i class="fa fa-users" aria-hidden="true"></i>
<span>Users</span>
</a>
</li>
<li class="nav-parent">
<a href="#!/apps">
<i class="fa fa-cubes" aria-hidden="true"></i>
<span>Apps</span>
</a>
<ul class="nav nav-children">
<li ng-repeat="app in appslist">
<a ng-href="#!/apps/{{app.CloudAppInstanceId}}">{{app.Name}}</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</aside>
Here's my controller :
angular.module('core').controller('PortalController', ['$scope', 'Portal',
function($scope, Portal) {
$scope.getAppslist = function() {
Portal.getApps(function(callback) {
$scope.appslist = callback;
$scope.blabla = 'blabla';
});
};
}]);
And here's my service :
angular.module('core').factory('Portal', function($http, $cookies, $rootScope) {
// define factory object
var factory = {};
var getApps = function(callback){
$http.get($rootScope.logrrApiAddress + '/apps', config).success(function(data, status, headers, config) {
callback(data);
});
}
factory.getApps = function(callback){
return getApps(callback);
}});
Thanks in advance for your response
Martin Taz

You don't need handlebars in an ng-href. Try:
<a ng href="'#!/apps/' + app.CloudAppInstanceId">{{app.Name}}</a>
Better yet would be to turn that into a method on your controller.

<a ng href="'#!/apps/' + app.CloudAppInstanceId">{{app.Name}}</a>
Seems to me that app is not defined in the scope, what you do set in PortalController, though, is $scope.appslist.
Also, the Portal factory function must return an object instance (it currently doesn't return anything). AND the factory's method must actually return a promise, too.
angular.module('core').factory('Portal', [
'$http', '$cookies', '$rootScope',
function($http, $cookies, $rootScope) {
var factory = {}; // define factory object
factory.getApps = function(){
// FIXME: what is "config", where is it supposed to come from?
return $http.get($rootScope.logrrApiAddress + '/apps', config);
};
return factory; // <-- you need to return something
}
]);
angular.module('core').controller('PortalController', [
'$scope', 'Portal',
function($scope, Portal) {
$scope.getAppslist = function() {
Portal.getApps().then(function (data) {
$scope.apps = data;
$scope.blabla = 'blabla';
});
};
}
]);
I changed things a bit, esp. got rid of the callback parameter - you don't need that, simply get the promise that getApps() returns and use the data once the promise is resolved.