I'm only hobbyist programmer and i'm quite not to familiar with angular so I need help with it.
I am building an domotic heating controller and using a webpage as GUI
My question is how to set up a function input[number] correctly. the only info a found about it on the lib reference page and one about how he prevent to add character other than number.
I have difficuty to add it with my current page for 2 reasons; -I have an ng-repeat and the input[number] just bind in all of then. -I want to bind it with my other JSON data to first view the actual value of my channel.setPoint var and if I change it output it to the var for I can make a put request to the server on click on ok button.
<p>Setpoint ºC
<input type="number" name="setpoint" ng-model="channel.setpoint" value={{channels.setPoint}} min="5" max="30" step="0.5" size="10"></input>
<button ng-click="setpoint()">ok</button>
</p>
here the actual code , and the JSON data that I use.
... and one more thing : is it posible to pause the $interval while I change the value of the setpoint to prevent it to bind back to the data value ???
thanks.
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script>
var app = angular.module('app',[
'ui.router'
])
.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider){
$urlRouterProvider.otherwise('/');
}])
.controller('temperature', ["$scope", "$interval", "ArduinoService", function($scope, $interval, service){
$scope.channels = [];
$interval( function(){ updateAjax(); }, 5000); // put the function loop here
function updateAjax(){
service.getChannels(function(err, result){
if(err){
return alert(err);
}
// puis les mets dans le scope
$scope.channels = result.channels;
})
};
$scope.init = function() { //on load page first get data
updateAjax();
}
$scope.switchChannel = function(channel) { // change name function
alert('vous avez cliqué le canal ' + channel);
service.switchChannel(channel, function(){
$scope.init();
});
};
$scope.setpoint = { //// input[number] not working
value: 21 //want it equal to channel.setPoint
};
$scope.setpoint = function(channel) {
alert(JSON.stringify(setpoint));
}
}])
.service('ArduinoService', ['$http', function($http){
return {
getChannels : function(cb) {
$http.get('http://192.168.0.110/ajax_inputs')
.success(function(result){
cb(null, result);
});
},
switchChannel : function(canal, cb) {
$http.post('http://192.168.0.110/switch' , {canal:canal})
.success(function(result){
cb(null, true);
});
}
};
}])
</script>
</head>
<body ng-app="app" ng-controller="temperature" ng-init="init()" ;>
<h1>Arduino Home Automation heater control</h1>
<!-- directive de repeat sur les données de vue channels -->
<div class="IO_box" ng-repeat="channel in channels">
<p><span class="channelName">{{channel.canal}}</span></p>
<button type="button" ng-click="switchChannel(channel.canal)"> OFF </button><br /><br />
<h2>{{channel.name}}</h2>
<form> Change name:<br>
<h2><input type="text" size="12" ng-model="channelName"{{channel.name}}></h2>
<input type="submit" value="Ok">
<br>
</form>
<p></p>
<h4><span class="Ainput" >{{channel.temperature}}ºC</span></h4>
<p>Setpoint ºC
<input type="number" name="setpoint" ng-model="channels.setpoint" value={{channels.setPoint}} min="5" max="30" step="0.5" size="10"></input>
<button ng-click="setpoint()">ok</button>
</p>
<h5><h4>state: <span class="permRun">{{channel.permRun}}</span></h4></h5>
<h5><span class="AoutputChannel">{{channel.percent_out}}%</span></h5>
</div>
<p><h5> <a href="page2.htm">Config</a>.</h5></p>
</body>
</html>
"channels": [
{
"name": "name0",
"canal": "0",
"status": true,
"temperature": 18.91,
"setPoint": 5.00,
"permission": false,
"percentOut": 0 }] //10 times
