nekoMiaChan
nekoMiaChan

Reputation: 181

Angular js model value changes are not reflected in ui

Values in the UI doesn't change even after executing the code in controller. It displays the initial values with out a problem. I've tried calling $scope.$apply() at the end of each function (submit and transfer) but it didn't work(it only gave an error with the $http.post()). What am i missing here?

app.controller('RegisterController', ['$scope','$http', function($scope,$http) {  
    $scope.user = {
        email: '[email protected]',
        password1: '1qaz2wsx',
        password2:'1qaz2wsx',
        password:'1qaz2wsx',
        username:'Admin',
        profile_picture:'',
        dobDay:'12',
        dobMonth:'12',
        dobYear:'1993',
        date_of_birth:'',
        stateMessage:'',
        messageColor:'white',
    };
    
    var transfer = function(){
        $http.post('http://localhost/cw/index.php/rest/resource/user/action/create',$scope.user).then(function successCallback(response) {
            if(response.data.status!=null){
                if(response.data.status=='success'){
                    $scope.user.stateMessage = 'success';
                    $scope.user.messageColor = "green";
                }
                else if(response.data.status=='failure'){
                    $scope.user.stateMessage = response.data.message;
                    $scope.user.messageColor = "red";
                }
                
            }
        },function errorCallback(response) {
            $scope.user.stateMessage = "Error occured.";
            $scope.user.messageColor = "red";
        });
        
    };
    
    $scope.submit = function(){
        $scope.user.stateMessage="";
        $scope.user.messageColor="white";
        var proceed = true;
        
        if(!validateFields()){
            $scope.user.stateMessage = "All fields must be filled!";
            $scope.user.messageColor = "red";
            proceed = false;
        }
        
        if(validateDate($scope.user.dobDay,$scope.user.dobMonth,$scope.user.dobYear)){
            $scope.user.date_of_birth= $scope.user.dobYear+"-"+$scope.user.dobMonth+"-"+$scope.user.dobDay;
        }else {
            proceed = false;
            $scope.user.stateMessage = "Date is invalid!";
            $scope.user.messageColor = "red";
        }
            
        if($scope.user.password1!=$scope.user.password2){
            proceed = false;
            $scope.user.stateMessage = "Passwords don't match!";
            $scope.user.messageColor = "red";
            
        }else $scope.user.password = $scope.user.password1;
        if(proceed){
            var file = document.getElementById('filePicker').files[0];
            reader = new FileReader();

            reader.onloadend = function(e) {
                $scope.user.profile_picture = JSON.stringify(e.target.result);
                $scope.$apply();
                console.log($scope.user.profile_picture);
                transfer();
            }
            reader.readAsDataURL(file);
        } 
        
        
        function validateFields(){
            /*some form validation*/
            return true;
        }
        
        function validateDate(day,month,year){
          /*some date validation*/
            return true;
        }
       
    }
}]);

HTML code

 <div ng-controller="RegisterController">
        <span style="background-color:{{user.messageColor}}"><h4>{{user.stateMessage}}</h4></span>
    </div>
<table style="text-align: left" ng-controller="RegisterController">
                            <tr>
                                <td>
                                    Username
                                </td>
                                <td>
                                    <input type="text" ng-bind="user.username" ng-model="user.username">
                                </td>       <td>&nbsp;</td><td>&nbsp;</td>
                            </tr>
                            <tr>
                                <td>
                                    Email
                                </td>
                                <td>
                                    <input type="email" ng-bind="user.email" ng-model="user.email">
                                </td>       <td>&nbsp;</td><td>&nbsp;</td>
                           </tr>
                           <tr>
                                <td>
                                    Password
                                </td>
                                <td>
                                    <input type="password" ng-bind="user.password1" ng-model="user.password1">
                                </td>       <td>&nbsp;</td><td>&nbsp;</td>
                            </tr>
                            <tr>
                                <td>
                                    Retype password
                                </td>
                                <td>
                                    <input type="password" ng-bind="user.password2" ng-model="user.password2">
                                </td>       <td>&nbsp;</td><td>&nbsp;</td>    
                           </tr>
                           <tr>
                                <td>
                                    Date of Birth
                                </td>
                                <td>
                                    <input type="text" ng-bind="user.dobDay" ng-model="user.dobDay" value="DD" size="2" maxlength="2">
                                    <input type="text" ng-bind="user.dobMonth" ng-model="user.dobMonth" value="MM" size="2" maxlength="2">
                                    <input type="text" ng-bind="user.dobYear" ng-model="user.dobYear" value="YYYY" size="4" maxlength="4">
                                </td>    
                           </tr>
                           <tr>
                                <td>
                                    Profile picture
                                </td>
                                <td>
                                    <input id="filePicker" type="file" ng-bind="user.profile_picture" ng-model="user.profile_picture" accept="image/*">
                                    
                                </td>    
                           </tr>
                           <tr>
                               <td></td>
                               <td style="float:left">
                                    <button ng-click="submit()">Submit</button>
                               </td>
                           </tr>
                        </table>

Upvotes: 3

Views: 917

Answers (1)

nekoMiaChan
nekoMiaChan

Reputation: 181

It seems like i cannot use the same controller in 2 instances. Moving the status div in to the table assigned with the controller worked for me. There are ways to share data between controllers by using a service but i won't go there since this is only for a coursework.

AngularJS: share the data of the same controller in two different, not nested parts of the page

Upvotes: 1

Related Questions