angular: can't set initial value to input box

Question

for my angular i have the following:

this is the html

<div ng-app='mainApp' ng-controller='myControl'>
   <mydirective datas="datas"></mydirective>
</div>

js file

var mainApp=angular.module('mainApp',[])
.controller('myControl',['$scope','$http',function($scope,$http){
    $http.get('./myjson.json').success(function(fdatas){
         $scope.datas=fdatas;
    });
}])
.directive('mydirective',function(){
     return{
       restrict:'E',
       scope:{
          datas:'='
       },
       template:"<input type='text' ng-model='inputvar'/>",
       controller:function($scope,window){
         $scope.inputvar=$scope.datas[0].name;
       }
     }
});

json file

[{ name:'test'},{name:'test2'}]

for some reason when i checked the debug console, it comes undefined and initial value can't be set. any idea?

thank you

Try adding $scope.inputvar = "Hello World"; in your controller. — andand
– andand, Commented Jan 12, 2016 at 3:27
What exactly did you want the initial value to be, what did you set it to be and what did it show? — andand
– andand, Commented Jan 12, 2016 at 3:30
delcare $scope.datas before $http like this $scope.datas=[] — Anik Islam Abhi
– Anik Islam Abhi, Commented Jan 12, 2016 at 3:31

andand · Accepted Answer · 2016-01-12 03:29:16Z

1

The typical way to declare the model in the controller... something like:

var mainApp=angular.module('mainApp',[])
    .controller('myControl',['$scope','$http',function($scope,$http){
        $scope.inputvar = "Hello World";
        $http.get('./myjson.json').success(function(fdatas){
            $scope.datas=fdatas;
    });
}])

answered Jan 12, 2016 at 3:29

andand

17.6k11 gold badges61 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

luis Over a year ago

thanks @andand, i'm gonna be working with this inputvar inside the directive, is that the only way to set the initial value properly?

andand Over a year ago

There are other ways... using a service to communicate between the controller and directive comes to mind; this allows you to abstract away some of the functionality from both the directive and the controller. However, the examples in the documentation at docs.angularjs.org/guide/directive uses this pattern frequently... initialize the model in the controller.

Vijay Patel · Accepted Answer · 2016-01-12 08:40:16Z

1

<html ng-app=''>
  <head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script></head>
  <body ng-init='var=10'>
    <input type='text' ng-model='var'/>
 </body></html>

answered Jan 12, 2016 at 8:40

Vijay Patel

811 bronze badge

Collectives™ on Stack Overflow

angular: can't set initial value to input box

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related