Get checked values in another view with angularJS - angularjs

I have list of checkbox with button submit , and I when i click on submit, I have to get all checked values in other view table. I find a lot of answers, but they all propose to get values in the same view,but I need to get values in other view(ajoutFactAdmin2), how can I do that please. this is the code:
ajoutFactAdmin2.html
<div class="row" ng-repeat="x in namesF3">
<div class="col"><input type="checkbox" name="" ng-modal="x.selected" ng-checked="exist(x)" ng-click="toggleSelection(x)" ng-true-value="'{{x.CodeEnvoiColis}}'" ng-false-value="''" id="'{{x.CodeEnvoiColis}}'"></div>
<div class="col" >{{x.CodeEnvoiColis}}</div>
<div class="col" width="20%">{{x.StatutColis}} </div>
<div class="col" width="20%">{{x.VilleDestColis}}</div>
</div>
<div class="selectedcontent">
<h3> Selected Names </h3>
<p ng-repeat = "selectedName in selected"> {{selectedName.CodeEnvoiColis}} </p>
</div>
<a class="button button-info" ng-click="toggleSelection(x)" href="#/ajoutFactAdmin2" style="background-color:#1627C0;float: right;">Ajouter</a>
app.js :
$scope.selected = [];
$scope.namesF3 = [];
$scope.exist = function(item){
return $scope.selected.indexOf(item) > -1;
}
$scope.toggleSelection = function(item){
var x = [];
var idx = $scope.selected.indexOf(item);
if(idx > -1){
$scope.selected.splice(idx, 1);
}
else{
$scope.selected.push(item);
}
}

There are mainly 3 ways to achieve this
local storage/session storage:
To set value in local storage:
localStorage.setItem("key","value");
To get value:
localStorage.getItem("key");
Factory/Service
angular.module('app').factory('tempStorageService',function(){
var data={};
return{
setData:function(tempData){
data=tempData;
},
getData:function(){
return data;
}
}
})
$rootScope
$rootScope.tempData = YourData;
I would prefer to go with localstorage option because if you refresh the browser the data that is stored using factory or with $rootscope vanishes.

Related

Select item in Angular drop down

I have a web app written using mvc and angular. I have an issue where when loading a record, the select does not select any value. My textboxes and checkboxes all work, but my selects don't. My html for my select is
<div class="row">
<div class="col-md-4">
Project Type
</div>
<div class="col-md-4">
<select ng-options="ProductType.Value for ProductType in ProductTypes track by ProductType.Id"
class="form-control" ng-model="Dissemination.ProductType"></select>
</div>
</div>
The dropdown is loaded on page load.
angular.module('DisseminationApp').controller('DisseminationProjectInfoController', function ($scope, $http, validationMethods, dataService, ProjectServiceFactory) {
$scope.ShowProject = false;
$scope.ProductTypes = dataService.getProductTypes();
});
The service is just returning hard coded values for the select.
function getProductTypes() {
var values = [];
values.push({ Id: '52146595-0DC6-4A81-9C18-0482C817F724', Value: 'Option 1'});
values.push({ Id: 'F61D261E-895E-4039-A125-C29972673623', Value: 'Option 2'});
return values;
};
I then have a click event that is the item.
<div class="row" ng-repeat="dissemination in Disseminations|orderBy:sort.column:sort.descending">
<div class="col-md-2" ng-click="OpenRecord(dissemination)">
link
</div>
<div class="col-md-3">
{{dissemination.TypeString}}
</div>
<div class="col-md-3">
{{dissemination.Title}}
</div>
<div class="col-md-3">
{{dissemination.CreateDateString}}
</div>
</div>
And in this click event, I open up the dialog and set the scope value to the new dissemination. Everything works except for the dropdown values.
$scope.OpenRecord = function (newValue) {
if (newValue != undefined) {
$("#DisseminationId").modal('show');
alert(newValue.ProductType.toUpperCase() == '52146595-0DC6-4A81-9C18-0482C817F724');
$scope.Dissemination = newValue;
$scope.Dissemination.ProductType = $scope.Dissemination.ProductType.toUpperCase();
alert($scope.Dissemination.ProductType);
}
});
The first alert comes back as true and the second alert is set to the correct value. Example of issue is here https://plnkr.co/edit/vDC0uu6MD3h6r3Woruo9?p=streamer

Get checked values in other view

I have list of checkbox with button submit , and I when i click on submit, I have to get all checked values in other view table. I find a lot of answers, but they all propose to get values in the same view,but I need to get values in other view(ajoutFactAdmin2), how can I do that please. this is the code:
ajoutFactAdmin2.html
<div class="row" ng-repeat="x in namesF3">
<div class="col"><input type="checkbox" name="" ng-modal="x.selected" ng-checked="exist(x)" ng-click="toggleSelection(x)" ng-true-value="'{{x.CodeEnvoiColis}}'" ng-false-value="''" id="'{{x.CodeEnvoiColis}}'"></div>
<div class="col" >{{x.CodeEnvoiColis}}</div>
<div class="col" width="20%">{{x.StatutColis}} </div>
<div class="col" width="20%">{{x.VilleDestColis}}</div>
</div>
<div class="selectedcontent">
<h3> Selected Names </h3>
<p ng-repeat = "selectedName in selected"> {{selectedName.CodeEnvoiColis}} </p>
</div>
<a class="button button-info" ng-click="toggleSelection(x)" href="#/ajoutFactAdmin2" style="background-color:#1627C0;float: right;">Ajouter</a>
app.js :
$scope.selected = [];
$scope.namesF3 = [];
$scope.exist = function(item){
return $scope.selected.indexOf(item) > -1;
}
$scope.toggleSelection = function(item){
var x = [];
var idx = $scope.selected.indexOf(item);
if(idx > -1){
$scope.selected.splice(idx, 1);
}
else{
$scope.selected.push(item);
}
}
You have to do like when user click submit button you need to call one function on controller and stored all value checked value in local storage and redirect to next page and next controller you have to get local storage value and display in view page.
or
You can do like from controller function you have to pass array as string and in next controller get state param value and use json.parse for convert string to object and display in html

Workaround for error 10 $digest() iterations reached

I am displaying data from the database (using Web API) on the page:
<div ng-repeat="Item in Items">
<div class="row">
<div class="col-sm-3">{{Item.Id}}</div>
<div class="col-sm-3">{{Item.Desc)}}</div>
<div class="col-sm-6">{{Item.CollectionID}}</div>
</div>
</div>
the above works fine, but when I try getting actual Collection Name, I get an issue:
<div ng-repeat="Item in Items">
<div class="row">
<div class="col-sm-3">{{Item.Id}}</div>
<div class="col-sm-3">{{Item.Desc)}}</div>
<div class="col-sm-6">{{GetCollectionName(Item.CollectionID)}}</div>
</div>
</div>
here is my controller function for getting Collection Name:
$scope.GetCollectionName = function (CollId) {
$http.get('http://Server/App/api/GetCollName/' + CollId).
then(function (result) {
$scope.CollectionName = result.data;
return $scope.CollectionName;
});
}
is there a better way to do this besides modifying my underlying query?
The basic idea here is to use ng-init to initialize a local CollectionName variable for each Item in your ng-repeat. You can then use that local variable to output CollectionName[Item.CollectionID].
Here's a working demo
<div ng-repeat="Item in Items" ng-init="GetCollectionName(Item.CollectionID)">
<div class="row">
<div class="col-sm-3">{{Item.Id}}</div>
<div class="col-sm-3">{{Item.Desc)}}</div>
<div class="col-sm-6">{{CollectionName[Item.CollectionID]}}</div>
</div>
</div>
$scope.CollectionName = [];
$scope.GetCollectionName = function (CollId) {
$http.get('http://Server/App/api/GetCollName/' + CollId)
.then(function (result) {
$scope.CollectionName[CollId] = result.data;
});
}
It is bad practice to call the function inside loop. And you are using expression tag in angularjs which creates watcher. Always make sure all the necessary records to display is already in the associated scope variable.
$scope.GetCollectionName = function (CollId) {
if(!$scope.someDataCheck[CollId] && !$scope.someData[CollId]){
$scope.someDataCheck[CollId] = true;
$http.get('http://Server/App/api/GetCollName/' + CollId).
then(function (result) {
$scope.someDataCheck[CollId] = false;
$scope.someData[CollId].data = result.data;
});
}
return $scope.someData[CollId];
}

Populate a select list with AngularJS from a response in JSON

I would like to download a response on a server in JSON which contains the attribute to populate my select list. I would like to do it with AngularJS and I'm using Angular 2.
Nothing appears, I think the problem is on my attribute ng-repeat :
<div id="myDiv">
<div ng-app="d3DemoApp">
<div ng-controller="AppCtrl">
<div ng-repeat="n in filters track by $index">
{{n}}
</div>
</div>
</div>
</div>
This is my controller :
angular.module('d3DemoApp',[])
.controller('myCtrl',function($scope) {
$scope.notes = userService.getData();
//Create and append select list
var selectList = document.createElement("select");
selectList.setAttribute("id", "releaseFilter");
myDiv.appendChild(selectList);
selectList.setAttribute("class", "form-control");
selectList.setAttribute("onclick", "myFunction()");
//Create and append the options
for (var i = 0; i < $scope.notes.length; i++) {
var option = document.createElement("option");
option.setAttribute("value", array[i]);
option.text = $scope.notes[i];
selectList.appendChild(option);
}
});
This is the service which should download the response :
app.service("userService",["$http",
function($http) {
_this = this;
this.getData = function() {
},
$http.get('./dataOnServer.json'). // This adress is normally an HTTP adress which send me the JSON
success(function(data) {
return data;
});
}
]);
This is an online example of the problem with Plunker : https://plnkr.co/edit/du7sU8bhg2G3X7HckbV9?p=preview
I hope you will can help me, thanks a lot !
I would point out that you are repeating filters when you are not defining such variable in your scope or anywhere? You should probably repeat $scope.notes so it would go like this:
<div id="myDiv">
<div ng-app="d3DemoApp">
<div ng-controller="AppCtrl">
<div ng-repeat="n in notes track by $index">
{{n}}
</div>
</div>
</div>
</div>
EDIT:
And you can do a select like this:
<select>
<option ng-repeat="n in notes">{{n.value}}</option>
</select>
And your JSON is invalid. It should be like this for the repeat:
[{value: "value 1"},{value: "value 2"},{value: "value 3"}]

angularjs model reload after item delete

I'm pretty new in angularjs and I have no idea how do this.
<div class="userData" ng-repeat="user in users">
<div class="float"
<img ng-click="deleteUser($event)" src="myurl">
</div>
<div class="userDiv"
<input type="checkbox" ng-model="user.active" ng-click="handleUserActive()">
<input type="text" ng-model="user.text">
</div>
</div>
I need remove a item when the user click the img.
My model is:
$scope.users = [
{active: true, text: text}
]
Just do:
<img ng-click="deleteUser($index)" src="myurl">
And the method:
$scope.deleteUser = function(index) {
$scope.users.splice(index, 1)
}
What tymeJV said, however, you want to pass the object as the parameter rather than the index like this:
<img ng-click="deleteUser(user)" src="myurl">
$scope.deleteUser = function(user) {
var index = $scope.users.indexOf(user);
$scope.users.splice(index, 1)
}
The reason why is the index can change if you do an orderBy on the ng-repeat.
See an example here: http://jsfiddle.net/6a5zT/

Resources