-2

I did a very little application, but binding not working as model to object. How is it possible?

angular.module("simpleapp", [])         
    .controller("Controller", ['$scope', function($scope) {
        $scope.sample = {};
        $scope.sample.input = 4;
    }]);
<body ng-app = "simpleapp" >
   
    <input ng-model="sample.input"  type="text"  value="text" />
    <div ng-controller = "Controller"><p>input "{{sample.input}}"</p></div>
   
</body>
user127520
  • 11
  • 1
  • 5

4 Answers4

1

You are using simpleapp in HTML and just app in your JS. They have to be the same in order to work correctly.

Plus you put the input with the scope variable outside the controller. It should be inside.

For example you can edit your html like this:

<body ng-app="app" ng-controller="Controller">
    <!-- other divs here -->
</body>
fbid
  • 1,570
  • 2
  • 18
  • 29
  • Hi, yes, it should be simple app in places, it was copy-paste error. Can't use controller just on some elements, not whole body, for this? – user127520 Feb 25 '16 at 13:39
  • Ok Bro Post me an object you like me to Process and Show in Binded way .. Comment here or Update as Comment in My Plunker Let me Know – Prasad Feb 25 '16 at 14:05
  • 1
    @user127520 Yes of course it's possible to use a controller only on some elements. In the code you posted, as you are using just one controller for all the application, imo it's the best option to attach it to the body, but in case you have more than one controller, specific to some sections. – fbid Feb 25 '16 at 16:51
0

You have to update your body tag from <body ng-app="app"> and then you have put put your input inside the scope of your controller

<body ng-app="app">
      <div ng-controller = "Controller">
         <input ng-model="sample.input"  type="text"  value="text" />
         <p>input "{{sample.input}}"</p>
       </div>
</body>
Atul Chaudhary
  • 3,698
  • 1
  • 31
  • 51
  • I think first thing I have noticed that u don't have to use value attribute when u using ng-model – Atul Chaudhary Feb 25 '16 at 08:56
  • No mate I didn't downvote ur answer I really hate doing that. I was just trying to point the mistake – Atul Chaudhary Feb 25 '16 at 11:27
  • Sure i Just Double checked .. Thanks!! – Prasad Feb 25 '16 at 11:36
  • Yes, if you put it in one div, it works. But what if i want to put it in different divs, it doesn't. It's very strange. I don't think I'll always be able to put them like this. Does anybody know why it's that strange? – user127520 Feb 25 '16 at 13:10
0

Use Proper Angularjs Version Library .You need to Go through Angularjs Doucmentation and Try to Understand by experimenting . That Makes you Strong

Some Beginner Mistakes :-

You Should write all the code after assigning Controller to Html Element . Otherwise Your Code Don't Work even if it is Correct . You need to assign a variable to Use.

html Code sample (understand Your mistake by taking look at code or the Below Plunkers :-) :-

<body ng-controller = "sampleController">

  <input ng-model="sample.node"  type="text" />

      <p>input "{{sample.node}}"</p>

      <input ng-model="sample1"  type="text" />

      <p>input "{{sample1}}"</p>

</body>

Controller Coding :-

angular.module("sampleApp", [])  
           .controller("sampleController", ['$scope', function($scope) {

               $scope.sample = {'node':1};

               $scope.sample1 = 'my first default value';

             }]);

Here we go Simple Binding Example :-

http://jsfiddle.net/cmckeachie/Y8Jg6/

Plunker With Little More Concept of Data binding :- https://plnkr.co/edit/TmAsSCKQDHfXYEbCGiHW?p=preview

Go through Documentation for some more understanding Good Luck !!

Prasad
  • 1,562
  • 5
  • 26
  • 40
  • Hi. No this doesn't answer. The thing i want is to use my object in controller, sample. But in all examples there's nothing with created object, all examples are like yours. Can it be one object scope with some properties, not different object, like in your example? i tried different, it works, when one doesn't. – user127520 Feb 25 '16 at 13:04
0

The answers by Atul,NV Prasad and fbid are absolutely correct.You can view the DEMO here.

One thing that they have missed out is another way to bind your elements to the angular variable.That is using ng-bind.It is used as follows:

<p ng-bind="sample.input"></p>

What's the difference between ng-bind="sample.input" and {{sample.input}}?

When you load the page, with the {{}} notation, you will see the curly brackets until the angular content is rendered.In the case of ng-bind, you won't.

For more details:LINK and this answer specifically

Community
  • 1
  • 1
Satej S
  • 2,113
  • 1
  • 16
  • 22