Using AngularJS I am sending a user to a page that has a query string based on employees they selected on a previous page. I am logging this variable, users, correctly but I can't use it with an ng-if in the DOM. I want to use ng-if when user.ID from the DOM equals user from the JS.
The HTML is:
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<div class="ProfileSheet" ng-repeat="user in users" ng-if="user.ID == user">
<h3 class="heading">User Profile</h3>
<table id="Profile">
<tr>
<th>User</th>
<td>{{user.Title}}</td>
</tr>
<tr>
<th> User Admin ID</th>
<td>{{user.ID}}</td>
</tr>
</table>
<br>
</div>
</div>
The JS is:
var app = angular.module('myApp', ['ngSanitize']);
app.controller('MainCtrl', function($scope, $http, $q){
var getQueryString = function (field, url){
var href = url ? url : window.location.href;
var reg = new RegExp('[?&]' + field + '=([^&#]*)', 'i');
var string = reg.exec(href);
return string ? string[1] : null;
}
var users = getQueryString('users', window.location.href)
$(document).ready(function() {
console.log(users);
});
How can I make this work?
Bonus: How can I make theng-repeat work if multiple users were selected. For example: if the query string returns users as 19, 21, and 25 the ng-repeat currently looks for a user ID of 19,21,25. Not three separate items.
Set $scope.users instead of var users. The template code uses scope variables: what you call as var_name in your template is actually $scope.var_name in the controller.
I was able to do this with $scope.selectedusers and ng-if="user.ID == selectedusers. Using $scope.users resulted in errors probably from using ng-repeat = "user in users".
Related
I am new to Angular JS (1) and I am having issues with ng-repeat. I am using socket.io with Angular. Here is my controller:
var messagingApp = angular.module('messagingApp', []);
function mainController($scope) {
var socket = io.connect();
socket.on('message', function(data){
$scope.users.push({'Name': 'yeh'});
console.log($scope.users);
});
$scope.users = []; //if I put stuff here and comment out socket stuff, it shows in the front-end
};
messagingApp.controller('mainController',mainController);
I can see that it is going inside that on block (via console.log). However, it is not displaying anything to the front-end. My front-end is as follows:
<body ng-controller="mainController">
<div ng-repeat="user in users">
<p>{{ user.Name }}</p>
</div>
My understanding is that if you change the model (users in this case), it should automatically update the ng-repeat. Any help would be appreciated.
Add $scope.$apply() after pushing to the array. Because you are updating the model outside of the angular scope. So the angularjs doesnot know the model has been updated. More about $scope.$apply http://tutorials.jenkov.com/angularjs/watch-digest-apply.html
you are pushing the object in array and try to iterate Array. So you should specify the position.
<body ng-controller="mainController">
<div ng-repeat="user in users">
<p>{{ user[$index].Name }}</p>
</div>
or try this..
socket.on('message', function(data){
$scope.users.data.push({'Name': 'yeh'});
console.log($scope.users.data);
});
$scope.users = {data:[]};
<div ng-repeat="user in users.data">
<p>{{ user.Name }}</p>
</div>
I have a parent and child controller relationship. This is a non-working mockup of the basic functionality. I'm sure anyone more competent than me can get it working for a Plunker or Fiddle model. (So there is probably something wrong with: $scope.data.contactList = [{ID: 1, Email: "someemail#email.com"}, {ID: 2, Email: "anotheremail#email.com"}];) I tried creating some objects for the contactList array.
Anyway. I want to be able to click a link in the second table in the code below to invoke EditShowContact. In my actual app, this will show a hidden div and it will obviously display more properties of a contact than just the email.
In my actual program, the values of the table are filled out properly (i.e. my ng-repeat directive is working fine), but I cant seem to get the ng-model directive to respond. I've tried various different ways and nothing seems to work.
<html ng-app="myApp"><head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('ContactsController', function ($scope)
{
this.currentContactID = null;
this.EditShowContact = function(intContactID)
{
this.currentContactID = intContactID;
//this.currentContact = $scope.data.contactList[intContactID]; unclear why this assignment fails
};
});
app.controller('ActionsController', function ($scope)
{ $scope.data = {};
$scope.data.contactList = [{ID: 1, Email: "someemail#email.com"}, {ID: 2, Email: "anotheremail#email.com"}];
});
</script>
</head>
<body ng-controller="ActionsController as ActCtrl">
<div ng-controller="ContactsController as ContactsCtrl">
<table border = "1";>
<tr><th>Email</a></th>
<th>Name</th></tr>
</table>
<div >
<table ng-repeat="Contact in ContactsCtrl.data.contactList" border="1">
<tr>
<td>{{Contact.Email}}</td>
<td>{{Contact.Name}}</td>
</tr>
</table>
</div>
<div>
<form>
<input type="input" ng-model="ContactsCtrl.data.contactList[currentContactID].Email"></input>
</form>
</div>
</div>
</body>
</html>
There are quite a few errors here such as :
ContactsCtrl has no information about the ContactList. You are trying to find object in array using ID in place in index using <table> element inside <div> and more..
Bascially, i have reduced the need of two controllers to one and made a Working Demo.
I need to get data from $scope.List2 object:
<div ng-app="App">
<div id="firstlist" ng-controller="Controller">
<table id="requesttable" class="RequestTable">
<tr ng-repeat="item2 in List2">
<td class="selectedItem">{{item2.Title}}</td>
</tr>
</table>
<button id="Reqbutton" onclick="SendRequest()">Send</button>
</div>
</div>
The problem is that if I put SendRequest function inside controller then it cannot be called (I get "SendRequest() is not defined" message). And if I put the function outside the controller I cannot access List2.
What do I miss?
As #sp00m suggested. You should use ng-click instead of onclick on the button. The html would look like this then:
<button id="Reqbutton" ng-click="sendRequest()">Send</button>
In your controller
app.controller('testController', ['$scope', function {
$scope.list2 = [];
$scope.sendRequest = function() {
var test = $scope.list2;
...
};
}]);
Here's my route...
angular.module('ng').
config(function ($routeProvider) {
$routeProvider.
when('/User_View', { templateUrl: '/rest/tbot/run/User_View' });
});
In the template it has the following...
<div ng-controller="TMUser">
TMUser is defined in the template in a script block. But the code in the controller doesn't appear to run. Why is this?
The controller shouldn't be defined in the template file. I don't think Angular can know about it and load it that way. Define it in a code file that will be executed before the route change happens.
You can also specify the controller in the routeProvider configuration object, like:
when('/User_View', { templateUrl: '/rest/tbot/run/User_View', controller:'TMUser' });
This fiddle demonstrates a very simple example (source)
Above answer is correct.
But i achived the same thing using ng-include and ng-hide, what exactly ng-view and routing does.
I have created a partial page without controller and included that in parent page and made that partial page hidden after a button click i am just displaying the page.
Routing has there on benifit. you can pass the paramter and change the view accordingly ang browser history.
here is my page conatins below code inside a child controller.
<span ng-include="'/PartialPages/ChangeDetails.htm'"></span>
which refers my parital page
<div id="ChangeInfo" ng-show="datashow">
<table width="100%">
<thead>
<tr>
<th>File Name</th>
<th>File Create Date</th>
<th>File Modified Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="file in FilesDetails" ng-class="{TableStrip : ($index % 2)}">
<td>{{file.FileName}}</td>
<td>{{file.CreateDate}}</td>
<td>{{file.ModifiedDate}}</td>
</tr>
</tbody>
</table>
<hr />
</div>
and the controller code
var deploymentVerifierModule = angular.module("DeploymentVerifierApp", ['DeploymentServiceModule']);
deploymentVerifierModule.controller("DeploymentVerifierCntrl", function ($scope, DeploymentService) {
$scope.datashow = false;
$scope.PleaseWait = false;
$scope.VerifyChange = function () {
//Get the Change ticket number from textbox
$scope.PleaseWait = true;
var changeticketnum = document.getElementById("ChangeNumber").value;
DeploymentService.GetChangeDetails(changeticketnum).then(function (data) {
$scope.FilesDetails = angular.fromJson(data);
$scope.PleaseWait = false;
$scope.datashow = true;
}, function (error) { });
};
});
still i did not get some of your point why do you want controller to be in template. and templateurl property contains the extenstion of page also.
There is a list of users retrieved from a rest api. Here is the template
<div ng:controller="UserController">
<a ng-click="createUser()">Create User</a>
<div ng-view>
<ul>
<li ng-repeat="user in users">
{[{user.first_name}]} {[{user.last_name}]}
</li>
</ul>
</div>
</div>
The JS:
function UserController($scope, User, Group){
$scope.users = User.query();
$scope.createUser = function(){
//$scope.users = null;
//$scope.users.pop();
//$scope.users.push(new User({id:'5'}));
console.log($scope.users);
}
}
The service: http://dpaste.com/1065440/
All users a retrieved and listed correctly. The problem is that I cannot manipulate the rendered list at all. No matter what I do push, pop or set to null. The list does not change in the template. However the last log statement shows the changes, it prints e.g. NULL when the users array is set to null.
Any ideas where the problem is?
The object you push into the array should be an instance of User
function UserController($scope, User){
$scope.users = User.query();
$scope.createUser = function(){
$scope.users.push(new User({first_name:'Bob', last_name: 'Schmitt'}));
}
}
So, use new User({})
From our conversation, it seems the problem was in the routing. The same outer controller was assigned to the partial that was being loaded in the ng-view. Removing ng:controller="UserController" and moving the createUser button to the partial would solve the problem, but if there's really a need to call the createUser method from outside of ng-view, then all the data related to it will need to be in the outer controller. So, you can keep your outer controller as it is, and change your route to use an empty placeholder controller.
make sure createUser is being called. IE ng-click or something.
<button type="button" ng-click="createUser()">Create User</button>
Your push function looks correct, but your binding in html looks wrong. It should be double curly brackets.
<li ng-repeat="user in users">
{{user.first_name}} {{user.last_name}}
</li>
Added Example I've used previously on adding object.
<div ng-app="main">
<div ng-controller="MyCtrl">
<button ng-click="add()" >Add</button>
<div id="container">
<div ng-repeat="test in tests>{{test.name}}</div>
</div>
</div>
</div>
$scope.tests = {};
$scope.add = function() {
var newTest = {name: 'Test Message'};
$scope.tests.push(newTest);
};