AngularJS : How to make dynamic field button only for last button?

AngularJS : How to make dynamic field button only for last button? - javascript

In the dynamic input field is there any option to implement plusSign = true only for the last item ?
(function() {
var app = angular.module('managementApp', []);
// var app = angular.module('managementApp', ['ngRoute']);
app.controller('phonebookController', function($scope, $http) {
$scope.dynamicField = function(buttonStatus, inputIndex) {
if (!buttonStatus) {
$scope.currentContact.contacts.push({
"phone": ""
});
} else {
$scope.currentContact.contacts.splice(inputIndex, 1);
}
};
$scope.currentContact = [{
"phone": "07875 506 426"
}, {
"phone": "+91 9895 319991"
}, {
"phone": "+44 7875 506 426"
}];
$scope.dynamicField = function(buttonStatus, inputIndex) {
if (!buttonStatus) {
$scope.currentContact.push({
"phone": ""
});
} else {
$scope.currentContact.splice(inputIndex, 1);
}
};
$scope.checkIndex = function(totalCount, indexCount) {
indexCount++;
// alert(indexCount);
/*if (totalCount === indexCount) {
//alert("last one");
$scope.plusSign = true;
}else{
$scope.plusSign = false;
}*/
};
});
})();
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="managementApp">
<div class="row" ng-controller="phonebookController">
<div class="form-group" ng-repeat="contact in currentContact" ng-init="checkIndex(currentContact.length, $index);">
<label for="contact-number3" class="col-sm-3 control-label">Contact number {{$index + 1 }}</label>
<div class="col-sm-9">
<div class="input-group">
<input type="tel" class="form-control" placeholder="Contact number {{$index + 1 }}" ng-model="contact.phone">
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-init="plusSign = true"
ng-click="plusSign = !plusSign; dynamicField(plusSign, $index);">
<i class="glyphicon " ng-class="plusSign ? 'glyphicon-plus' : 'glyphicon-minus'"></i>
</button>
</span>
</div>
</div>
</div>
</div>
</div>

You can use $last inside ng-repeat which is true if the repeated element is last in the iterator. Or you can do it with css only with .row:last-of-type {/**/}.

check $last in your function for example:-
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="managementApp">
<div class="row" ng-controller="phonebookController">
<div class="form-group" ng-repeat="contact in currentContact" ng-init="checkIndex($last);">
<label for="contact-number3" class="col-sm-3 control-label">Contact number {{$index + 1 }}</label>
<div class="col-sm-9">
<div class="input-group">
<input type="tel" class="form-control" placeholder="Contact number {{$index + 1 }}" ng-model="contact.phone">
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-init="plusSign = true"
ng-click="plusSign = !plusSign; dynamicField(plusSign, $index);">
<i class="glyphicon " ng-class="plusSign ? 'glyphicon-plus' : 'glyphicon-minus'"></i>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
controller method
$scope.checkIndex = function(last) {
(last === true)
$scope.plusSign = true;
else
$scope.plusSign = false;
};

Related

Creating dynamic multiple tables using Angular

I have created a dynamic table that allows the user to add rows to the table. Now I want to create multiple tables that allow the user to add multiple rows.
The problem with my code is that the 'variable' choice is shared and making any changes to any of the fields in any of the tables causes all the table fields to replicate the behaviour. Can someone tell me how to create tables that are capable of holding different values?
Angular.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="createQuiz.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
</script>
<script src="quizMgmt.js"></script>
</head>
<body>
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
<form action="/createQuiz">
<ul class="list-group" data-ng-repeat="path in path">
<span>
<h1 ng-model="colNum" >Path {{colNum}}</h1>
<button class="btn btn-primary" ng-click="addNewPath()">Add New Path</button>
</span>
<li class="list-group-item" data-ng-repeat="choice in choices">
<span>
<span class="col-sm-2">
<select class="form-control" ng-model="choice.type" name="item" ng-options="item for item in selectOptions">
</select>
</span><br>
<span class="col-sm-9">
<input class="form-control" type="text" ng-model="choice.name" name="value" placeholder="Enter mobile number">
</span>
<button class="btn btn-danger" ng-click="removeChoice(choice.id)" ng-if="choice.id!=index">-</button>
<button class="btn btn-danger" ng-click="addNewChoice()" ng-if="choice.id===index">+</button>
</span>
</li>
</ul>
<br>
<button class="btn btn-primary" ng-click="addNewChoice()">Add fields</button>
<input type="submit">
</form>
<br>
<br>
<div id="choicesDisplay">
<!-- {{ choices }} -->
{{path}}
</div>
</div>
</body>
quizMgmt.js
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.selectOptions = ["Mobile",
"Office",
"Home"
];
$scope.choices = [{"id": 1,"type":"Mobile","name":""},
{"id": 2,"type":"Mobile","name":""}];
$scope.path =[{"NumPath":1, 'path':$scope.choices}];
$scope.colNum=1;
$scope.index = $scope.choices.length;
$scope.addNewChoice = function() {
var newItemNo = ++$scope.index;
$scope.choices.push({'id':newItemNo, "type":"Mobile","name":""});
};
$scope.addNewPath= function() {
var NumPath=$scope.path.length;
console.log($scope.path.length)
$scope.colNum=NumPath;
$scope.path.push({"NumPath": NumPath,'path':$scope.choices});
};
$scope.removeChoice = function(id) {
if($scope.choices.length<=1){
alert("input cannot be less than 1");
return;
}
var index = -1;
var comArr = eval( $scope.choices );
for( var i = 0; i < comArr.length; i++ ) {
if( comArr[i].id === id) {
index = i;
break;
}
}
if( index === -1 ) {
alert( "Something gone wrong" );
}
$scope.choices.splice( index, 1 );
};
});

Issue is with the $scope.choices which is common object , So it is getting replicated.
$scope.choices must be isolated and restrict it to that respective path like below.
I believe by default you need to two choices while adding new path. Hope this helps.
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.selectOptions = ["Mobile",
"Office",
"Home"
];
$scope.getDefaultChoices = function() {
return [{"id": 1,"type":"Mobile","name":""},
{"id": 2,"type":"Mobile","name":""}];
};
$scope.choices = $scope.getDefaultChoices();
$scope.paths = [{"NumPath":1, 'choices':$scope.choices}];
$scope.colNum=1;
$scope.index = $scope.choices.length;
$scope.addNewChoice = function(path) {
var newItemNo = ++$scope.index;
path.choices.push({'id':newItemNo, "type":"Mobile","name":""});
};
$scope.addNewPath= function() {
var NumPath=$scope.paths.length;
console.log($scope.paths.length)
$scope.colNum=NumPath;
$scope.paths.push({"NumPath": NumPath,'choices': $scope.getDefaultChoices() });
};
$scope.removeChoice = function(path, id) {
if(path.choices.length<=1){
alert("input cannot be less than 1");
return;
}
var index = -1;
var comArr = eval( path.choices );
for( var i = 0; i < comArr.length; i++ ) {
if( comArr[i].id === id) {
index = i;
break;
}
}
if( index === -1 ) {
alert( "Something gone wrong" );
}
path.choices.splice( index, 1 );
};
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
</script>
</head>
<body>
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
<form>
<ul class="list-group" data-ng-repeat="path in paths">
<span>
<h1 ng-model="colNum" >Path {{colNum}}</h1>
<button class="btn btn-primary" ng-click="addNewPath()">Add New Path</button>
</span>
<li class="list-group-item" data-ng-repeat="choice in path.choices">
<span>
<span class="col-sm-2">
<select class="form-control" ng-model="choice.type" name="item" ng-options="item for item in selectOptions">
</select>
</span><br>
<span class="col-sm-9">
<input class="form-control" type="text" ng-model="choice.name" name="value" placeholder="Enter mobile number">
</span>
<button class="btn btn-danger" ng-click="removeChoice(path, choice.id)" ng-if="choice.id!=index">-</button>
<button class="btn btn-danger" ng-click="addNewChoice(path)" ng-if="choice.id===index">+</button>
</span>
</li>
</ul>
<br>
<button class="btn btn-primary" ng-click="addNewChoice(path)">Add fields</button>
</form>
<br>
<br>
<div id="choicesDisplay">
<!-- {{ choices }} -->
{{path}}
</div>
</div>
</body>

The issue is with choices object. As you are using same instance in multiple objects so as new table created data get copied.
The solution of this is to create new instance of choices when new table gets created using angular.copy
NOTE: I didn't understand why you added "Add Fields" outside the list as it doesn't make any sense when you create new tables dynamically.
I have made few changes in the code kindly refer below.
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.selectOptions = ["Mobile",
"Office",
"Home"
];
$scope.choices = [{"id": 1,"type":"Mobile","name":""},
{"id": 2,"type":"Mobile","name":""}];
$scope.path = [{"NumPath":1, 'path':angular.copy($scope.choices)}];
$scope.colNum=1;
$scope.addNewChoice = function(path) {
var newItemNo = path.path.length;
path.path.push({'id':++newItemNo, "type":"Mobile","name":""});
};
$scope.addNewPath= function() {
var NumPath=$scope.path.length;
console.log($scope.path.length)
$scope.colNum=NumPath+1;
$scope.path.push({"NumPath": NumPath+1,'path':angular.copy($scope.choices)});
};
$scope.removeChoice = function(id, path) {
path.splice(id-1, 1);
// re-initialize choice id
angular.forEach(path, function(o, index){
o.id = index+1;
})
};
});
<html>
<head>
<link rel="stylesheet" type="text/css" href="createQuiz.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
</script>
<script src="quizMgmt.js"></script>
</head>
<body>
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
<ul class="list-group" data-ng-repeat="path in path">
<span>
<h1 ng-model="colNum" >Path {{colNum}}</h1>
<button class="btn btn-primary" ng-click="addNewPath()">Add New Path</button>
</span>
<li class="list-group-item" data-ng-repeat="choice in path.path">
<span>
<span class="col-sm-2">
<select class="form-control" ng-model="choice.type" name="item" ng-options="item for item in selectOptions">
</select>
</span><br>
<span class="col-sm-9">
<input class="form-control" type="text" ng-model="choice.name" name="value" placeholder="Enter mobile number">
</span>
<button class="btn btn-danger" ng-click="removeChoice(choice.id, path.path)" ng-if="choice.id!=path.path.length">-</button>
<button class="btn btn-danger" ng-click="addNewChoice(path)" ng-if="choice.id===path.path.length">+</button>
</span>
</li>
<br/>
<br/>
<button class="btn btn-primary" ng-click="addNewChoice(path)">Add fields</button>
</ul>
<br>
<br>
<br>
<div id="choicesDisplay">
<!-- {{ choices }} -->
{{path}}
</div>
</div>
</body>
Good day :)

AngularJS : Changing values in other div, is changing data in all divs

Page looks like this :
HTML
<li class="list-group-item" ng-repeat="eachData in lstRepositoryData">
<div class="ember-view">
<div class="github-connection overflow-hidden shadow-outer-1 br2">
<!-- code to created other stuff-- >
<div class="panel-heading">
<a for="collapse{{$index}} accordion-toggle" data-toggle="collapse" href="#collapse{{$index}}" aria-expanded="true" aria-controls="collapse{{$index}}">Show SFDC
connections</a>
<div id="collapse{{$index}}" class="collapse mt3 panel-collapse">
<div class="row no-gutters pa3">
<div class="col-12 col-sm-6 col-md-8">
<form>
<div class="form-group row">
<label for="inputorgNamel3" class="col-sm-2 col-form-label required">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputorgNamel3" placeholder="Name" ng-model="eachData.sfdcOrg.orgName" ng-disabled="eachData.sfdcOrg.disabledForm == 'true'">
</div>
</div>
<div class="form-group row">
<label for="inputenvironment3" class="col-sm-2 col-form-label required">Environment</label>
<div class="col-sm-10">
<div class="dropdown bootstrap-select">
<select class="form-control" id="inputenvironment3" ng-model="eachData.sfdcOrg.environment" ng-disabled="eachData.sfdcOrg.disabledForm == 'true'">
<option value="0" selected>Production/Developer</option>
<option value="1">Sandbox</option>
<option value="2">Custom Org</option>
</select>
</div>
</div>
</div>
<div class="form-group row">
<label for="salesforceLoginl3" class="col-sm-2 col-form-label required">Salesforce Login</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="salesforceLoginl3" placeholder="Salesforce userName"
ng-model="eachData.sfdcOrg.userName" ng-disabled="eachData.sfdcOrg.disabledForm == 'true'">
</div>
</div>
<div class="form-group row" ng-show="eachData.sfdcOrg.environment === '2'">
<label for="salesforceinstanceURLl3" class="col-sm-2 col-form-label required">Instance Url</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="salesforceinstanceURLl3" placeholder="Salesforce Instance Url"
ng-model="eachData.sfdcOrg.instanceURL" ng-disabled="eachData.sfdcOrg.disabledForm == 'true'">
</div>
</div>
<div class="form-group row">
<label for="branchNamel3" class="col-sm-2 col-form-label required">Branch Name</label>
<div class="col-sm-10">
<input class="form-control" id="branchNamel3" placeholder="search branches..."
ng-model="eachData.sfdcOrg.instanceURL">
</div>
</div>
<div class="form-group row">
<div class="form-group">
<!-- Buttons Code -->
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
JS Code :
var app = angular.module('forceCIApp', ["angularjs-dropdown-multiselect"]);
app.controller('orderFromController', function ($scope, $http, $attrs) {
$scope.reposInDB = [];
$scope.lstRepositoryData = [];
const sfdcOrg = {
orgName: '',
environment: '0',
userName: '',
instanceURL: '',
authorize: 'Authorize',
save: 'Save',
testConnection: 'Test Connection',
delete: 'Delete',
oauthSuccess: 'false',
oauthFailed: 'false',
oauthSaved: 'false',
disabledForm: 'false',
multiBranchData: [],
multiExtraSettings: {enableSearch: true, showCheckAll: false, showUncheckAll: false},
multiSelectedBranches: []
};
$http.get("/fetchUserName").then(function (response) {
if (response.data !== undefined && response.data !== null) {
$scope.userName = response.data.login;
localStorage.setItem('githubOwner', response.data.login);
$http.get("/fetchRepositoryInDB?gitHubUser=" + response.data.login).then(function (response) {
if (response.data.length > 0) {
for (let i = 0; i < response.data.length; i++) {
let lstBranches = [];
$.each(response.data[i].repository.mapBranches, function (key, value) {
console.log(key);
lstBranches.push(key);
});
sfdcOrg.multiBranchData = changeListToObjectList(lstBranches);
sfdcOrg.multiSelectedBranches = response.data[i].repository.lstSelectedBranches === undefined || null ? [] : changeListToObjectList(response.data[i].repository.lstSelectedBranches);
response.data[i].repository.sfdcOrg = sfdcOrg;
$scope.lstRepositoryData.push(response.data[i].repository);
$scope.reposInDB.push(response.data[i].repository.repositoryFullName);
}
$('#repoConnectedDialog').removeClass('hidden');
}
}, function (error) {
});
const avatarSpanTag = '<span class="absolute flex items-center justify-center w2 h2 z-2 ' +
'nudge-right--4 pe-none" style="top: -15px">\n' +
' <img src=' + response.data.avatar_url + '>\n' +
' </span>';
$(avatarSpanTag).insertAfter('#idSelectTab');
}
}, function (error) {
});
When I start editing input fields other divs input field also gets changed. But the data is different in both divs eachData.
Also disabling the form with eachData.sfdcOrg.disabledForm works fine.
But modifying the input elements modifies all the the input fields.
How do I avoid this?

The data was constructed by reference assignment instead of creating a clone object for each sfdcOrg property of each item in the lstRepositoryData array.
$http.get("/fetchRepositoryInDB?gitHubUser=" + response.data.login).then(function (response) {
if (response.data.length > 0) {
for (let i = 0; i < response.data.length; i++) {
let lstBranches = [];
$.each(response.data[i].repository.mapBranches, function (key, value) {
console.log(key);
lstBranches.push(key);
});
sfdcOrg.multiBranchData = changeListToObjectList(lstBranches);
sfdcOrg.multiSelectedBranches = response.data[i].repository.lstSelectedBranches === undefined || null ? [] : changeListToObjectList(response.data[i].repository.lstSelectedBranches);
̶r̶e̶s̶p̶o̶n̶s̶e̶.̶d̶a̶t̶a̶[̶i̶]̶.̶r̶e̶p̶o̶s̶i̶t̶o̶r̶y̶.̶s̶f̶d̶c̶O̶r̶g̶ ̶=̶ ̶s̶f̶d̶c̶O̶r̶g̶;̶
response.data[i].repository.sfdcOrg = angular.copy(sfdcOrg);
$scope.lstRepositoryData.push(response.data[i].repository);
$scope.reposInDB.push(response.data[i].repository.repositoryFullName);
}
$('#repoConnectedDialog').removeClass('hidden');
}
});
Use angular.copy to clone a new object.

How can I store an array of chat messages in local storage and how can I retrieve them back in angularjs?

Iam working with chat application.Here I have to store the messages in local storage those entered by individual user as well as group messages also.So I want to use local storage inorder to store the messages so that when I click on the particular user,previous messages sent by that user has to be shown.Iam strucked at writing code for this.How can I implement this code in javascript?
Here is my entire code:
var grp = angular.module("grpApp", [])
.config(function ($interpolateProvider) {
$interpolateProvider.startSymbol('{|');
$interpolateProvider.endSymbol('|}');
})
.directive('scrollBottom', function () {
return {
scope: {
scrollBottom: "="
},
link: function (scope, element) {
scope.$watchCollection('scrollBottom', function (newValue) {
if (newValue) {
$(element).scrollTop($(element)[0].scrollHeight);
}
});
}
}
})
.controller("grpCtrl", function ($scope) {
document.getElementById("name").innerHTML = "Group";
$scope.friendsList = ["Devi", "Teja", "Sneha", "Srujana"];
$scope.msgdata = [];
var d = new Date();
$scope.time = d.toLocaleString();
console.log("hlooo" + $scope.time);
//$scope.uname=JSON.parse($stateParams.uname);
document.getElementById("clear").addEventListener("keyup", function (event) {
if (event.keyCode == 13) {
document.getElementById("submitmsg").click();
}
});
$scope.send = function () {
document.getElementById("submitmsg").disabled = false;
var retData = localStorage.getItem("storedData");
console.log("hiieeee" + retData);
var retrieveData = JSON.parse(retData);
console.log("heloooo" + retrieveData);
$scope.msgdata.push(retrieveData);
$scope.msgdata.push($scope.message + " " + " " + $scope.time);
$scope.message = "";
console.log("hi" + $scope.msgdata);
}
$scope.showGrp = function () {
document.getElementById("name").innerHTML = "Group";
$scope.msgdata = [];
var preData = $scope.msgdata;
localStorage.setItem("storedData", JSON.stringify(preData));
}
$scope.frndgrp = function (frnd) {
document.getElementById("name").innerHTML = frnd;
$scope.msgdata = [];
var preData = $scope.msgdata;
localStorage.setItem("storedData", JSON.stringify(preData));
}
});
<div class="container-fluid">
<div class="row content">
<div class="col-sm-4 sidenav" id="divlength" style="height:600px;overflow-y:scroll">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search friend.." ng-model="search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
<br>
<button class="btn btn-primary btn-lg" style="width:50%" ng-click="showGrp()">Group</button>
<br>
<br>
<div class="nav nav-pills nav-stacked" ng-repeat="frnd in friendsList|filter:search">
<a class="btn btn-primary" style="width:50%" ng-bind="frnd" ng-click="frndgrp(frnd)"></a>
<br>
<br>
</div>
<br>
</div>
<div class="col-sm-8" style="height:100px">
<h4 align="center" id="name" style="font-weight:bold"></h4>
<footer id="wrapper">
<div class="chatbox">
<div class="chatBox" scroll-bottom="msgdata" id="clearmsg">
<div ng-repeat="item in msgdata track by $index"><span class="btn" id="msg" style="background-color:lightgreen;color:black; margin-bottom:5px" ng-bind="item"></span>
</div>
</div>
</div>
<div class="input-group add-on" style="width:100%;">
<input class="form-control usermsg chatTextField" placeholder="Type a message" name="srch-term" type="text" ng-model="message" id="clear" required>
<div class="input-group-btn">
<button class="btn btn-success" type="submit" style="float:right" id="submitmsg" ng-click="send()" ng-disabled="!message"><span class="glyphicon glyphicon-send"></span></button>
</div>
</div>
</footer>
</div>
</div>
</div>

AngularJS: Need to resolve a bug of empty array

I have a subscription feature which is open through checking a radio box. When open inside this section I have 2 radio buttons for subscribe the period weekly or monthly and below an item. When I pressing save the state of this period have to be saved for one item I have from the server. You can check the screenshot to see the view. Anyway, there is no save because the array result empty and that item is not in that array. My problem is I see the item below but somehow I'm not pushing it into the array with the period selected from radio buttons. I would like to receive help to understand why of that and what I should modify to make it works properly.
Please check the code I'm sharing controller and view:
searchApp.controller('UserSettingsCtrl', ['$scope', '$q', '$rootScope', 'aiStorage', 'userConfig', 'UserSettingsService', 'WebsiteSource', 'AnalyticsEmailService', 'toaster', '$translate', '$filter', 'ngTableParams',
function($scope, $q, $rootScope, store, userConfig, UserSettingsService, WebsiteSource, AnalyticsEmailService, toaster, $translate, $filter, ngTableParams) {
$scope.init = function() {
$scope.availableLanguages = {
da: 'Dansk',
en: 'English',
sv: 'Svensk'
}
window.scope = $scope
$scope.userInfo = store.get('user')
$scope.loadingAction = false
$scope.selectFlag = false
$scope.subscriptionEnginesFromServer = []
$scope.subscriptionEngines = []
$scope.analyticsEmailSettings = {}
$scope.engines = angular.copy(WebsiteSource.sites)
AnalyticsEmailService.getUserSubscription().then(
function success(response) {
$scope.loadingAction = false
$scope.subscription = response
console.log('response.data', response.data)
$scope.subscriptionEnginesFromServer = populateSubscribedEnginesFromServer(response.data)
getUnselectedEngines()
$scope.analyticsEmailSettings.subscribed = (response.data.length > 0)
},
function error() {})
}
function populateSubscribedEnginesFromServer(data) {
console.log('data', data)
var subscriptionEngines = []
for (var i = 0; i < data.length; i++) {
var subscription = data[i]
var engine = $scope.engines.filter(function(x) {
if (x.id === subscription.engine) {
var index = $scope.engines.indexOf(x)
$scope.engines[index].type = subscription.type
}
return x.id === subscription.engine
})[0]
console.log('engine', engine)
if (engine) subscription.name = engine.name
subscriptionEngines.push(subscription)
}
console.log('subscriptionEngines', subscriptionEngines)
if (subscriptionEngines.length == 0) {
$scope.analyticsEmailSettings.subscription = 'WeeklyAnalytics'
} else {
$scope.analyticsEmailSettings.subscription = subscriptionEngines[0].type
}
return subscriptionEngines
}
// Save for all always the user have to press the save button if wants save no auto save as it is now
$scope.save = function() {
$scope.loadingAction = true
if ($scope.analyticsEmailSettings.subscribed) {
AnalyticsEmailService.updatesubscriptions($scope.subscriptionEnginesFromServer, function success(response) {}, function error() {})
} else {
$scope.analyticsEmailSettings.subscription = 'WeeklyAnalytics'
$scope.subscriptionEnginesFromServer = []
AnalyticsEmailService.updatesubscriptions($scope.subscriptionEnginesFromServer, function success(response) {}, function error() {})
}
UserSettingsService.save({
userId: $scope.userInfo.id
}, $scope.userInfo, function() {
$scope.loadingAction = false
userConfig.setCurrentUserConfig($scope.userInfo)
userConfig.setUserLocale()
store.set('user', $scope.userInfo)
toaster.pop({
type: 'success',
body: $translate.instant('notifications_user_settings_changed_success')
})
}, function() {})
$scope.subscriptionEngines = []
}
// removeSelectedEngines
getUnselectedEngines = function() {
for (var i = 0; i < $scope.engines.length; i++) {
if ($scope.subscriptionEnginesFromServer.filter(function(x) {
return x.engine === $scope.engines[i].id
}).length == 0)
$scope.engines[i].type = ''
}
}
// #todo: consider referring by array key instead of engineId
function updatesubscriptions(engineId, subscriptionType) {
var engine
for (var i = 0; i < $scope.subscriptionEnginesFromServer.length; i++) {
if ($scope.subscriptionEnginesFromServer[i].engine == engineId) {
engine = $scope.subscriptionEnginesFromServer[i]
}
}
engine.type = subscriptionType
engine.engine = engineId
}
$scope.updateSubscriptionType = function(engine) {
for (var i = 0; i < $scope.subscriptionEnginesFromServer.length; i++) {
updatesubscriptions($scope.subscriptionEnginesFromServer[i].engine, $scope.analyticsEmailSettings.subscription)
}
}
$scope.addSubscribedEngine = function(engine) {
$scope.subscriptionEngines = []
engine.type = $scope.analyticsEmailSettings.subscription
$scope.subscriptionEnginesFromServer.push({
type: engine.type,
engine: engine.id,
name: engine.name
})
}
$scope.selectFirstUnsubscribedEngine = function() {
var filtered
filtered = $scope.engines.filter(function(x) {
return x.type == ''
})
filtered = $filter('orderBy')(filtered, 'name')
$scope.engine.current = filtered.length ? filtered[0] : null
}
$scope.removeSubscribedEngine = function(engine) {
engine.type = ''
for (var i = 0; i < $scope.subscriptionEnginesFromServer.length; i++) {
if ($scope.subscriptionEnginesFromServer[i].engine == engine.id) {
$scope.subscriptionEnginesFromServer.splice(i, 1)
}
}
save()
}
}])
View:
<div ng-controller="UserSettingsCtrl" ng-init="init()">
<div class="content">
<header class="flex-container row header">
<div class="flex-1">
<h1 class="flex-1">{{ 'user_settings_title' | translate }}</h1>
</div>
<!--<a class="logout" href ui-sref="account.settings.changepassword">{{ 'user_change_password_menu' | translate }}</a>-->
</header>
<div class="main-edit">
<div class="subsection">
<div class="inputs-container-row full-width">
<div class="input-group full-width">
<div class="inputfield">
<label class="label ng-binding" for="name">
{{ 'user_settings_firstname_label' | translate }}
</label>
<input type="text" name="firstname" ng-model="userInfo.firstName" class="flex-1" ng-class="{'first-letter-to-upper' : userInfo.firstName.length > 0 }" placeholder="{{ 'user_settings_firstname_placeholder' | translate }}">
</div>
</div>
<div class="input-group full-width">
<div class="inputfield">
<label class="label ng-binding" for="name">
{{ 'user_settings_lastname_label' | translate }}
</label>
<input type="text" name="lastname" ng-model="userInfo.lastName" class="flex-1" ng-class="{'first-letter-to-upper' : userInfo.lastName.length > 0 }" placeholder="{{ 'user_settings_lastname_placeholder' | translate }}">
</div>
</div>
</div>
<div class="inputs-container-row full-width">
<div class="inputs-container-row half-width">
<div class="input-group full-width">
<label class="label" for="name">{{ 'user_settings_language_label' | translate }}</label>
<div class="select-group full-width">
<select class="select" id="selectLanguage" ng-model="userInfo.language" ng-options="key as value for (key , value) in availableLanguages"></select>
<label for="selectLanguage"><span class="fa fa-angle-down"></span></label>
</div>
</div>
</div>
<div class="inputs-container-row half-width">
<div class="input-group full-width">
<label class="label" for="name">
{{ 'user_settings_phone_label' | translate }}
</label>
<input type="text" name="lastname" ng-model="userInfo.phoneNumber" placeholder="{{ 'user_settings_phone_placeholder' | translate }}">
</div>
</div>
</div>
</div>
<div class="subsection">
<div class="inputs-container-row half-width">
<div class="input-group full-width">
<label class="label" for="name">
{{ 'user_settings_password_label' | translate }}
<a ui-sref="account.settings.changepassword" class="button button-link--primary button--first">
{{ 'user_settings_password_button' | translate }}...
</a>
</label>
</div>
</div>
</div>
</div>
<div class="flex-container row header">
<div class="flex-1">
<h1 class="flex-1">{{ 'user_settings_emailStatistics_title' | translate }}</h1>
</div>
</div>
<!--||| Subscribe Start |||-->
<div class="main-edit">
<div class="subsection">
<div class="flex-container row">
<div class="radiobutton-group">
<div class="width-140">
<input id="subscribed" type="checkbox" ng-model="analyticsEmailSettings.subscribed" value="subscribed" class="radiobutton">
<label class="label highlight inline no-bottom-margin" for="subscribed">
{{ 'user_settings_emailStatistics_subscribe' | translate }}
</label>
</div>
</div>
</div>
<div ng-show="analyticsEmailSettings.subscribed">
<div class="flex-container row">
<div class="input-group flex-1" ng-switch="analyticsEmailSettings.subscription">
<label class="label" for="name">{{ 'user_settings_emailStatistics_recurrence' | translate }}</label>
<div class="inputs-container-row half-width" name="oftenReportSent">
<span class="radiobutton flex-1" ng-class="{'checked' : analyticsEmailSettings.subscription === 'WeeklyAnalytics'}" name="radio">
<input type="radio" name="WeeklyAnalytics" ng-model="analyticsEmailSettings.subscription" ng-change="updateSubscriptionType()" ng-checked="analyticsEmailSettings.subscription === 'WeeklyAnalytics'" value="WeeklyAnalytics" id="WeeklyAnalytics" ng-required="">
<label for="WeeklyAnalytics">{{ 'user_settings_emailStatistics_weekly' | translate }}</label>
</span>
<span class="radiobutton flex-1" ng-class="{'checked' : analyticsEmailSettings.subscription === 'MonthlyAnalytics'}">
<input type="radio" name="MonthlyAnalytics" ng-model="analyticsEmailSettings.subscription" ng-change="updateSubscriptionType()" ng-checked="analyticsEmailSettings.subscription === 'MonthlyAnalytics'" value="MonthlyAnalytics" id="MonthlyAnalytics" ng-required="">
<label for="MonthlyAnalytics">{{ 'user_settings_emailStatistics_monthly' | translate }}</label>
</span>
</div>
<div> <span style="color:red;" ng-show="analyticsEmailSettings.subscription == null">Please select option</span></div>
</div>
</div>
<h1>Before</h1>
<div ng-if="engines.length == 1">
<ul class="tags tags--inline item-with-inline-buttons">
<li ng-repeat="engine in engines | orderBy:'name'">
{{engine.name}}
<span class="button-icon button--primary button--delete" ng-click="removeSubscribedEngine(engine); selectFirstUnsubscribedEngine()">
<i class="fa fa-trash-o"></i>
</span>
</li>
</ul>
</div>
<h1>after</h1>
<div ng-show="engines.length > 1">
<div class="flex-container row" ng-show="((engines | filter:{type:''}:true).length != 0)">
<div class="input-group full-width">
<label class="label" for="selectEngine">
{{ 'user_settings_emailStatistics_engines_label' | translate }}:
</label>
<div class="half-width inputfield--horizontal" style="margin-bottom: 10px;">
<div class="full-width select-group" ng-if="(engines | filter:{type:''}:true).length > 0">
<select class="select" id="selectEngine" ng-model="$parent.engine.current" ng-options="website.name for website in engines | filter:{type:''}:true | orderBy:'name'" ng-init="$parent.engine.current = (engines | filter:{type:''}:true | orderBy:'name')[0]">
</select>
<label for="selectSubscription"><span class="fa fa-angle-down"></span></label>
</div>
<span ng-show="engines.length == 1">{{(engines | filter:{type:''}:true)[0].name}}</span>
<div id="btnAddWebSitesSubscription" ng-show="engines.length > 0" class="button button--add" ng-click="addSubscribedEngine(engine.current); selectFirstUnsubscribedEngine()"><i class="fa fa-plus"></i></div>
</div>
</div>
</div>
<div ng-model="successMessage" ng-show="showMessage" style="color:green;" class="message fadein fadeout">{{successMessage}}</div>
</div>
<h1 ng-show="subscriptionEnginesFromServer.length > 0 && engines.length > 1">Websites Subscribed</h1>
<div class="flex-container row" ng-if="subscriptionEnginesFromServer.length > 0 && engines.length > 1">
<ul class="tags tags--inline item-with-inline-buttons">
<li ng-repeat="engine in engines | filter:{type:'Analytics'} | orderBy:'name'">
{{engine.name}}
<span class="button-icon button--primary button--delete" ng-click="removeSubscribedEngine(engine); selectFirstUnsubscribedEngine()">
<i class="fa fa-trash-o"></i>
</span>
</li>
</ul>
</div>
</div>
</div>
<footer class="flex-container flex-end row footer">
<button class="button button--primary button--action" ng-click="save();">
<i ng-show="loadingAction" class="fa fa-spinner fa-spinner-custom"></i>
<span ng-show="!loadingAction">{{ 'general_save' | translate }}</span>
</button>
</footer>
</div>
</div>

Be careful of using ng-hide/ng-show as when the partial is 'hidden' it destroys the model (if there are any) contained within itself (so, use ng-if instead).
In your html in the subscription section, you make a call like this:
ng-change="updateSubscriptionType()"
But in your javascript you have:
$scope.updateSubscriptionType = function(engine) {
for (var i = 0; i < $scope.subscriptionEnginesFromServer.length; i++) {
updatesubscriptions($scope.subscriptionEnginesFromServer[i].engine, $scope.analyticsEmailSettings.subscription)
}
}
So it's expecting an 'engine' argument, which you never pass in. But looking at the code you don't use the engine argument anyway; you use the 'engine' property of $scope.subscriptionEnginesFromServer[i] but that's it.
It however, doesn't do anything that I can see, anyway. It loops through an empty array then calls updatesubscriptions() to do something, but it won't actually call it.
Also, the updatesubscriptions() method itself doesn't actually do anything. This is probably why you're not getting anything in your array. I'd suggest modifying your template slightly, because the subscription radio buttons are outside the engines loop, so you won't be able to associate the subscription type with any engine. Once you have done that, then the subscriptions type radio buttons will have access to 'engine', which you can pass in. Modify your method accordingly:
$scope.updateSubscriptionType = function(engine) {
if (!$scope.subscriptionEnginesFromService.includes(engine)) {
$scope.subscriptionEnginesFromService.push(engine);
}
updatesubscriptions(engine, $scope.analyticsEmailSettings.subscription);
}
And also modify the updatesubscriptions() slightly.

How to modify this demo of vue.js?

demo:
https://jsfiddle.net/8hh0p0ej/
In this demo,there is a selected attribute in items,which control the item selected or not and "allSelected".
Question:
When I use it in my project,the content of items will be gotten form mysql,there is no selected field,the status of one item doesn't need to be recorded,so I don't want to add this field,how to accomplish "Allselected" in this situation?

You can add a selected member to the data after it is fetched.
var vm = new Vue({
el: "#app",
data: {
items: []
},
methods: {
fillIn: function(index, n) {
this.items[index].num = n;
}
},
computed: {
nums: function() {
return [1, 2, 3, 4, 5];
},
allSelected: {
get: function() {
for (var i = 0, length = this.items.length; i < length; i++) {
if (this.items[i].selected === false) {
return false;
}
}
return true;
},
set: function(val) {
for (var i = 0, length = this.items.length; i < length; i++) {
this.items[i].selected = val;
}
}
},
sum: function() {
var totalAmount = 0;
for (var i = 0, length = this.items.length; i < length; i++) {
var item = this.items[i];
if (item.selected === true) {
totalAmount += item.price * item.num;
}
}
return totalAmount;
}
}
});
// Data as it might come from mysql
mysqlData = [{
message: 'Apple',
num: 1,
price: 5
}, {
message: 'Peach',
num: 1,
price: 10
}, {
message: 'Orange',
num: 1,
price: 15
}, {
message: 'Pear',
num: 1,
price: 20
}];
// Modify the data when we put it in the vm
vm.$set('items', mysqlData.map((item) => {
item.selected = false;
return item;
}));
<link href="//cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/css/tether.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="//cdn.bootcss.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/vue/1.0.26/vue.min.js"></script>
<div class="container">
<div class="card">
<h3 class="card-header">Cart</h3>
<div class="card-block">
<div id="app">
<div class="row">
<div class="col-xs-3">
<label class="c-input c-checkbox">
<input type="checkbox" v-model="allSelected">Select All
<span class="c-indicator"></span>
</label>
</div>
<div class="col-xs-2">
Goods
</div>
<div class="col-xs-5">
Number
</div>
<div class="col-xs-2">
Money
</div>
</div>
<form>
<div class="row" v-for="(index, item) in items">
<div class="col-xs-3">
<label class="c-input c-checkbox">
<input type="checkbox" v-model="item.selected">
<span class="c-indicator"></span>
</label>
</div>
<div class="col-xs-2">
{{ item.message }}
</div>
<div class="col-xs-5">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-text="item.num">
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li v-for="n in nums">
<a class="dropdown-item" #click="fillIn(index, n)">{{n}}个</a>
</li>
</ul>
</div>
</div>
<div class="col-xs-2">
{{ item.price * item.num }}
</div>
</div>
<div class="row">
<div class="col-xs-3">
Sum
</div>
<div class="col-xs-2">
</div>
<div class="col-xs-5">
</div>
<div class="col-xs-2">
{{ sum }}
</div>
</div>
<button type="submit" class="btn btn-primary" :disabled="sum === 0">Submit</button>
</form>
</div>
</div>
</div>
</div>

You could keep a separate object with the id of the object as a key and a Boolean value, that represents if the item is selected or not.
The items data would only have, message, num and price
While the selected data would have itemid and selected

We Keep Coding

JavaScript is the programming language of the Web.

AngularJS : How to make dynamic field button only for last button? - javascript

You can use $last inside ng-repeat which is true if the repeated element is last in the iterator. Or you can do it with css only with .row:last-of-type {/**/}.

Related

Creating dynamic multiple tables using Angular

AngularJS : Changing values in other div, is changing data in all divs

How can I store an array of chat messages in local storage and how can I retrieve them back in angularjs?

AngularJS: Need to resolve a bug of empty array

How to modify this demo of vue.js?

Categories

Resources