We Keep Coding

Editing data in AngularJS

I just began to study angular, tried to make some kind of SPA, but faced with problem of editing data in it. The obect is visible in console, but it hasn't appear on page, what I did wrong?
Here my controller:
var app = angular.module("testModule", ['ngRoute']);
app.config(function ($routeProvider){
$routeProvider.when('/', {
templateUrl: 'pages/main.html',
controller: 'addCtrl'
})
.when('/save', {
templateUrl: 'pages/save.html',
controller: 'editCtrl'
})
.when('/edit', {
templateUrl: 'pages/edit.html',
controller: 'addCtrl'
})
})
app.service('dataService', function($http) {
var data = {};
data.list = [];
var getData = function() {
$http.get("model/data.json").then(function (response) {
data.list = response.data;
});
}
return {
getDataFromJson: getData,
getData: data,
}
});
app.controller("mainCtrl", function($scope, dataService) {
dataService.getDataFromJson();
});
app.controller("editCtrl", function($scope, dataService) {
$scope.data = dataService.getData;
$scope.editData = function(adverse){
$scope.adverse= adverse;
console.log($scope.adverse)
}
});
and the part of page:
<div class="panel">
<form name="addForm" >
<div class="well" >
<div class="form-group">
<label for="name">Name:</label>
<input type='text' id="name" class="form-control" ng-model="adverse.name" placeholder={{adverse.name}} />
<label for="shop">Shop:</label>
<input type='text' id="shop" class="form-control" ng-model="adverse.shop" placeholder="{{adverse.shop}}" />
<label for="begin">Begin:</label>
<input id="begin" class="form-control" ng-model="adverse.begin" placeholder="{{adverse.begin}}" >
<label for="end">End:</label>
<input id="end" class="form-control" ng-model="adverse.end" placeholder="{{adverse.end}}" />
<button type="submit" class="btn btn-primary btn-block add_btn" ng-click="editData(adverse)">
Edit
</button>
</div>
</div>
</form>
</div>
Also here is a screenshot: the props of object suppose to be in the inputs but it hasn't.
enter image description here
If possible can you give me an example how I can do it by another way?

Recreated your scenario in this plunker. But it works. Please have a look at this plunker where you alo can see the StateProvider which is used instead of NgRoute
One thing I see which is incorrect is that you are sending the adverse object in the function and then setting the param to the scope adverse.
The thing is that the $scope.adverse already holds the values so you don't need to pass the value and setting it to the scope again. Remeber the scope is your glue between the view and ctrl
$scope.editData = function(){
console.log($scope.adverse)
}

Angular JS collect all input values from a div

I am new to Angular JS, I created a div with input elements and I didn't use ng-model for input boxes.
<div class="row">
<br>
<div class="col-sm-10" id="rankingForm" >
<p ng-repeat=" x in $ctrl.outputProductAttributeValueList">
{{x}} <input type="text" />
</p>
<br>
<button type="submit" ng-click="$ctrl.onRankingFormSubmit()"> SUBMIT</button>
</div>
</div>
When I click on submit button I have to access all input values .Please help me how to do that .. I tried as below.
angular.module("productList")
.component("productList",{
templateUrl : "product-list/product-list.template.html",
controller : ["$http" ,"$scope","$document",function productListController($http,$scope,$document){
var self = this;
self.outputProductAttributeValueList =[ "age", "gender","all"];
self.onRankingFormSubmit = function () {
var queryResult = $document[0].getElementById("rankingForm")
console.log(queryResult);
// HERE queryResult is printing how to proceed further
};
}]
});
Now I want to collect all those input values dynamically created by ng-repeat. Please tell me how to do that ?

AngularJS ngModel is the standard approach for binding the view into the model instead of interacting directly with the DOM.
You can get all the inputs within the div id="rankingForm" you can do:
var inputs = $document[0]
.getElementById('rankingForm')
.getElementsByTagName('input');
Or by using Document.querySelectorAll():
var inputs = $document[0].querySelectorAll('#rankingForm input');
Once you have the inputs than iterate over all of them to get the values.. Notice that I have added attribute name to the inputs:
Code whitout ngModel:
angular
.module('App', [])
.controller('AppController', ['$scope', '$document', function ($scope, $document) {
$scope.outputProductAttributeValueList = ['age', 'gender', 'all'];
$scope.onRankingFormSubmit = function () {
var inputs = $document[0].querySelectorAll('#rankingForm input');
inputs.forEach(function(input) {
console.log(input.name + ': ' + input.value);
});
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<div ng-app="App" ng-controller="AppController" class="row">
<br>
<div class="col-sm-10" id="rankingForm" >
<p ng-repeat="x in outputProductAttributeValueList">
{{x}} <input type="text" name="{{x}}" />
</p>
<br>
<button type="submit" ng-click="onRankingFormSubmit()">SUBMIT</button>
</div>
</div>
Code with ngModel:
angular
.module('App', [])
.controller('AppController', ['$scope', '$document', function ($scope, $document) {
$scope.outputProductAttributeValueList = ['age', 'gender', 'all'];
// Model inputs
$scope.inputs = {};
$scope.onRankingFormSubmit = function () {
$scope.outputProductAttributeValueList.forEach(function(input) {
// Access to model inputs: $scope.inputs[input]
console.log(input + ': ' + $scope.inputs[input]);
});
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<div ng-app="App" ng-controller="AppController" class="row">
<br>
<div class="col-sm-10" id="rankingForm" >
<p ng-repeat="x in outputProductAttributeValueList">
{{x}} <input type="text" ng-model="inputs[x]" />
</p>
<br>
<button type="submit" ng-click="onRankingFormSubmit()">SUBMIT</button>
</div>
</div>

Controller and input form html use var Javascript

I use the angularjs framework, I created an form.html and a controller.js with a variable that retrieves the SSID of a box.
How to automatically assign the value of the variable in the form.
This is an input field.
When launching the application, the form should display the SSID automatically without the user needing to do so.
Thank you kindly help me.
'use strict';
angular.module('djoro.controllers')
.controller('WifiSmartConfigCtrl', function ($scope, $window, $ionicPlatform) {
$scope.getSSID = function () {
var onSuccess = function (SSID) {
document.write(SSID);
};
var onFail = function () {
};
$ionicPlatform.ready(function () {
$window.cordova.plugins.Smartconfig.getSSID(onSuccess, onFail);
});
};
});
<ion-pane>
<ion-content ng-controller="WifiSmartConfigCtrl">
<form novalidate class="simple-form">
<fieldset>
<legend>WI-FI</legend>
<div class="list input-fields">
<label class="item item-input">
<span class="input-label">SSID :</span>
<input type="text" name="test" value="getSSID()" required show-hide-input>
</label>
<label class="item item-input" show-hide-container>
<span class="input-label">Password :</span>
<input type="text" name="password" required show-hide-input>
</label>
</div>
</fieldset>
</form>
</ion-content>
</ion-pane>

use the ng-model directive, it's exactly it's purpose :
'use strict';
angular.module('djoro.controllers')
.controller('WifiSmartConfigCtrl', function($scope, $window, $ionicPlatform) {
$scope.SSID = {};
$scope.getSSID = function() {
var onSuccess = function(SSID) {
$scope.SSID = SSID;
};
var onFail = function() {};
$ionicPlatform.ready(function() {
$window.cordova.plugins.Smartconfig.getSSID(onSuccess, onFail);
});
};
});
and in your view :
<input type="text" name="test" ng-model="SSID" required show-hide-input>

You need to add an ng-model to the input field like so:
<label class="item item-input">
<span class="input-label">SSID :</span>
<input type="text" name="test" ng-model="SSID" required show-hide-input>
</label>
then in your controller assign the value of SSID on the $scope:
$scope.SSID = [some_value]
see this plnkr
As you can see I have assigned the value of SSID manually, you can add it dynamically by assigning it in the callback of your function like so:
$scope.SSID = {}
var onSuccess = function (SSID) {
document.write(SSID);
$scope.SSID = SSID
};

How to propogate a changing scope variable through a function in AngularJs?

For example, if I have the following case:
function ACtrl($scope) {
$scope.title = "Title";
$scope.funkyString= funkyAndComplexStuff($scope.title);
function funkyAndComplexStuff(title) {
/*...*/
return title;
}
}
With html:
<div ng-app>
<div ng-controller="ACtrl">
<div>
{{title}} and length {{funkyString}}
<input type="text" ng-model='title' />
</div>
</div>
</div>
I would like the $scope.funkyString to update every time $scope.title gets changed.
As far as I see I have 2 options:
Using a watch on the variable
Creating a filter I could apply on $scope.funkyString
But both of those sound unndecessarily heavy. Is there anything else I could use to post-process the data as soon as it gets changed?
EDIT:
Modified my example so that people are hopefully less confused.

I would try something like this, so it can handle changes to $scope.title from other fields of code also
<div ng-controller="ACtrl">
<div>
{{title}} and length {{ funkyAndComplexStuff(title) }}
<input type="text" ng-model='title' />
</div>
</div>

You could do title.length as #ssilas777 has suggested. You can also set the $scope variable to be a function. As I understand it, the function will be called during the scope's $digest cycle, which will fire when any bound model changes. See this plunkr: http://plnkr.co/edit/9xspXj5ND8seEX2LNeMe?p=preview
See this HTML:
<input type="text" ng-model="title" />
Num chars: <span ng-bind="numCharsInTitle()"></span>
and the JS:
$scope.title = "The Title";
$scope.numCharsInTitle = function() {
return $scope.title.length;
}

Like ssilas777 and Charlie S and you said you can use $watch, custom $filter or function in $scope
But for me it's complicated to maintain code with function linked to the view. I prefere using $watch because all the processing is in the controller and only $scope.numberOfChars is present in the view.
If you use this many time, I would suggest you to create a custom filter.
angular.module('app',[])
.controller('ACtrl',
function ($scope) {
$scope.title = "Title";
getNumberChars($scope.title);
function getNumberChars(title) {
$scope.numberOfChars = title.length;
};
$scope.getNumberChars = function() {
return $scope.title.length;
};
$scope.$watch('title',getNumberChars);
})
.filter('customFilter', function() {
return function(input) {
return input.length;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ACtrl">
<div>
{{title}} and length {{numberOfChars}} or {{title.length}} or {{getNumberChars()}} or {{title | customFilter}}
<input type="text" ng-model='title' />
</div>
</div>
</div>

ng-change could be a simple solution depending on the element to which your title model is bound. If it's an input like in the example this might could work:
app.controller('MainCtrl', function($scope) {
$scope.title = "Title";
$scope.funkyAndComplexStuff = function(title) {
/*...*/
$scope.funkyString = title.length;
}
});
...
<body ng-controller="MainCtrl">
{{title}} and length {{funkyString}}
<input type="text" ng-model='title' ng-change="funkyAndComplexStuff(title)" />
</body>

Why not just:
function ACtrl($scope) {
$scope.title = "Title";
$scope.funkyAndComplexStuff = function () {
/*..do stuff with $scope.title..*/
return $scope.title; // or whatever
}
}
With html:
<div ng-app>
<div ng-controller="ACtrl">
<div>
{{title}} and length {{funkyAndComplexStuff()}}
<input type="text" ng-model='title' />
</div>
</div>
</div>
Not sure why somebody downvoted, but here is a demo: http://jsfiddle.net/xhdk3f25/1/

Add to list functionality in angular

I am new to angular and trying to implement add to list functionality. I have a few questions
why does console.log of $scope.newChat return undefined
Is newChat available to sendChat() call due to variable hoisting.
Template
<ion-list>
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
<img ng-src="{{chat.face}}" >
<h2>{{chat.name}}</h2>
<p>{{chat.lastText}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" ng-click="remove(chat)">
Delete
</ion-option-button>
</ion-item>
<ion-item >
<form ng-submit="sendChat(newchat)"> <!-- this line in question 2 -->
<label class="item item-input">
<input type="text" placeholder="What do you need to do?" ng-model="newchat.lastText">
<button type="submit" class="button button-right button-positive">Send</button>
</label>
</div>
</form>
</ion-item>
</ion-list>
controller
.controller('ChatsCtrl', function($scope, Chats) {
$scope.chats = Chats.all();
$scope.remove = function(chat) {
Chats.remove(chat);
}
$scope.sendChat = function(newchat){
Chats.set(newchat);
console.log($scope.newchat); //this line in question 1
newchat.lastText = "";
}
})

1) why does console.log of $scope.newChat return undefined
you are getting newchat on scope console.log($scope.newchat); try console logging with console.log(newchat); they both are same as newchat in ng-model make it available on scope. See console after clicking send button in demo below
2)Is newChat available to sendChat() call due to variable hoisting.
No it is available due to ng-model data binding
Demo
angular.module('myApp',[])
.controller('ChatsCtrl', function($scope) {
//$scope.chats = Chats.all();
$scope.remove = function(chat) {
//Chats.remove(chat);
}
$scope.sendChat = function(newchat){
// Chats.set(newchat);
console.log($scope.newchat); //this line in question 1
newchat.lastText = "";
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ChatsCtrl"> <form ng-submit="sendChat(newchat)"> <!-- this line in question 2 -->
<label class="item item-input">
<input type="text" placeholder="What do you need to do?" ng-model="newchat.lastText">
<button type="submit" class="button button-right button-positive">Send</button>
</label>
</form>
</div>

change your controller to following
.controller('ChatsCtrl', function($scope, Chats) {
$scope.newchat = {};
$scope.chats = Chats.all();
$scope.remove = function(chat) {
Chats.remove(chat);
}
$scope.sendChat = function(newchat){
Chats.set(newchat);
console.log($scope.newchat); //now you will have your $scope.newchat
newchat.lastText = "";
}
})