Question

我只是业余爱好者程序员而且我不熟悉角度，所以我需要帮助。

我正在构建一个domotic加热控制器并使用网页作为GUI

我的问题是如何正确设置功能输入[数字]。在lib参考页面上找到关于它的唯一信息，以及关于如何阻止添加除数字之外的字符的信息。

我有困难将其添加到当前页面有两个原因; - 我有一个ng-repeat，输入[number]只是绑定了所有的。 - 我想将它与我的其他JSON数据绑定，首先查看我的channel.setPoint var的实际值，如果我更改它输出到var，我可以点击确定按钮向服务器发出一个put请求。

        <p>Setpoint &#186;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>

这里是实际的代码，以及我使用的JSON数据。

......还有一件事：当我更改设定值的值以阻止它绑定回数据值时暂停$ interval是否可行???

感谢。

    </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}}&#186;C</span></h4>
    <p>Setpoint &#186;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

angularjs input [number]如何绑定到JSON数据

0 个答案: