Get checked values in other view - 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);
}
}

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

Related

Get checked values in another view with 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.

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"}]

Data can not be synchronized using angularjs

I store a data in a factory like this:
module.factory('AddedStockListData', function(){
var list= [];
var size = 0;
return{
getList: function(){
return list;
},
setList: function(data){
list = data;
},
getSize:function(){
return size;
},
setSize:function(){
size++;
},
setDelSize:function(){
size--;
}
}
});
And in my controller the code as follows:
$scope.stocksSearchList = AddedStockListData.getList();
$scope.load = function($done){
$timeout(function() {
document.getElementById("showTipsToDropDown").style.display = "none";
$scope.stocksSearchList = AddedStockListData.getList();
$done();
}, 500);
}
My html like this:
<ons-page ng-controller="createPortStockController">
<ons-pull-hook ng-action="load($done)" var="loader" id="pullDown">
<span ng-switch="loader.getCurrentState()">
<span ng-switch-when="initial"><ons-icon size="35px" icon="ion-arrow-down-a"></ons-icon> Pull down to refresh</span>
<span ng-switch-when="preaction"><ons-icon size="35px" icon="ion-arrow-up-a"></ons-icon> Release to refresh</span>
<span ng-switch-when="action"><ons-icon size="35px" spin="true" icon="ion-load-d"></ons-icon> Loading data...</span>
</span>
</ons-pull-hook>
<div>
<ons-toolbar class="DCF" fixed-style>
<div class="left">
<ons-back-button style="color:white;"></ons-back-button>
</div>
<div class="center" style="font-size:22px;" >Create Portfolio</div>
<div ng-click="create()"class="right" style="font-size:18px;color:white;margin-top:10px;padding-right:10px;" >Create</div>
</ons-toolbar>
<div class="addStockButton" ng-click = "myNavigator.pushPage('portStockSearchList.html', { animation : 'slide'})">
<i class="fa fa-plus" ></i>Add Stock
<p id="showTipsToDropDown"style="margin:0px;font-size:12px;text-align:center;color:#adadad;">After your first time add stocks, please drop down to refresh</p>
</div>
<div class="stockSearchList">
<div ng-repeat="stockSearch in stocksSearchList">
<div class="stockSearchOne">
<div class="stockSearchOneComp">{{stockSearch.company}}</div>
<div class="stockSearchOneInfo">Symbol: {{stockSearch.symbol}} | Exchange:{{stockSearch.exchange}} </div>
</div>
</div>
</div>
</div>
Actually, I change the factory data in next page,I want to make this page change the display while the factory data is changed.
But the result is , at the first time I change the data in the next page and back to this page, the data will not display, and I will refresh this page by use the ons-pull-hook> and then if I go to the next page to change the data, when I back to here, data will be synchronized display .
So the result is at the first time , I have to refresh the page to get the data, but after the first time, I don't need to do this
Anybody can help me to solve this problem?
Try using $scope.$apply() after the data have been fetched, it should update the content without any need to refresh the page. You can learn more about $scope.$apply() here.

AngularJs how to reload a template page after selecting a charater

I am using http.get and i need to reload a template after selecting a character so that my template gives the answer according to what I selected
The code of the template
<div class="container-fluid" ng-controller="CriterioCtrl">
<div id="result"></div>
<div>
Selected Items:
<div ng-repeat="id in selection">
{{id}}
</div>
</div>
<div ng-repeat-start="crit in data" class="row">
<h2 align="center">{{crit.name}}</h2>
<div ng-repeat="caracter in crit.characters" class="col-md-4">
<div type="checkbox" value="{{caracter.id}}" ng-checked="selection.indexOf(caracter.id) > -1" ng-click="clickSelection(caracter.id)">
<a href="#crit" class="thumbnail" ng-click="clickCriterios(caracter.id)">
<h4 align="center">{{caracter.name}}</h4>
<img ng-src="http://skaphandrus.com/{{caracter.image_url}}"/>
</a>
</div>
</div>
</div>
<div ng-repeat-end>
</div>
<!--<button class="btn" ng-click="toggle()">Toggle</button>
<p ng-show="visible">Hello World!</p> codigo de um botao -->
</div>
This code is for the selection
$scope.selection=[];
$scope.clickSelection = function clickSelection(caracterId) {
var idx = $scope.selection.indexOf(caracterId);
// is currently selected
if (idx > -1) {
$scope.selection.splice(idx, 1);
}
// is newly selected
else {
$scope.selection.push(caracterId);
}
var selectedId = $scope.selection;
console.log(selectedId);
// Check browser support
if (typeof(Storage) != "undefined") {
// Store
localStorage.setItem("idSelect", selectedId);
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("idSelect");
}
};
This code is the http part in another controller
MyApp.controller('EspeciesCtrl', function ($scope, $http) {
$http({
url: 'someurl',
method: "post",
params: {module_id: localStorage.getItem("idMod"),"characters[]": [localStorage.getItem("idSelect")]}
})
.then(function(res){
$scope.data = res.data;
});
});
This is the code of the template that have to change after the selection
<div class="container-fluid" ng-controller="EspeciesCtrl">
<div class="row">
<div ng-repeat="esp in data" class="col-md-6">
<a href="#infEsp" class="thumbnail" ng-click="clickEspecie(esp.id)">
<h4 align="center">{{esp.name}}</h4>
<img ng-src="{{esp.image_src}}"/>
</a>
</div>
</div>
</div>
How can i do that?
edit 1
If I've correctly understood, you may need to use ng-show (https://docs.angularjs.org/api/ng/directive/ngShow) whose boolean value checks if the user selected anything and show the extra bit of code you need, instead of trying to have another http request.
Also, it seems like you are using $scope.data for both the esp and the crit, so you will end up with the errors.
You probably don't need to reload the template.
You may want to use the data in $scope.data inside the template in order to let Angular manage the update on the view. As soon as the $scope.data changes, the rendered HTML changes too.
I can't comment but it would be helpful if you could share the template you are using and be more specific in your request :)

AngularJS show url or plain text if value contain text

How can I show in AngularJS and url or a plain text if a variable contains text?
For example let's have the model
$scope.model = {
Url: ''
};
<div data-ng-controller="myController">
if (model.Url)
{
URL
}
else
{
<p>{{model.Url}}</p>
}
<div>
P.S. The if else condition is for demo purpose, so how can I acheieve that using a directive like data-ng-if ?
You can try something like this:
<div data-ng-controller="myController">
<a ng-if="model.Url" ng-href="{{model.Url}}">URL</a>
<p ng-if="!model.Url">{{model.Url}}</p>
<div>
Note: you should use ng-href instead of href otherwise browser doesn't update attribute.
Update
This thing works only if url present or empty as in provided example. It doesn't check is value url or text. See answer below that checks.
Create a function to test if a block of text is a URL or not
$scope.isURL = function(text){
var expression = /[-a-zA-Z0-9#:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9#:%_\+.~#?&//=]*)?/gi;
// alternative
// var expression = new RegExp("^(http[s]?:\\/\\/(www\\.)?|ftp:\\/\\/(www\\.)?|www\\.){1}([0-9A-Za-z-\\.#:%_\+~#=]+)+((\\.[a-zA-Z]{2,3})+)(/(.)*)?(\\?(.)*)?");
var regex = new RegExp(expression);
/// for example text could be: text = 'www.google.com';
if (text.match(regex) ){
return true;
} else {
return false;
}
}
HTML:
<div data-ng-controller="myController">
<div ng-init="model.url = 'some text'"></div>
<div ng-if="isURL(model.url)">
<a ng-href='model.url' > is url </a>
</div>
<div ng-if="!isURL(model.url)">
<p ng-bind='model.url' > </p>
</div>
<!-- better done as ng-switch -->
<div ng-switch on="isURL(model.url)">
<p ng-switch-when='false' ng-bind='model.url'></p>
<a ng-switch-when='true' ng-href='model.url' ng-bind='model.url'></a>
</div>
<div>

Resources