Update controller from the view

Question

I want to bind a variable to get the value of the choice of the user (selected in my form) and print it in my HTML (into verifying it works).

Here comes my project: PLUNKER

This method works, but the value is not putted in the controller <div>{{sel.selectedRequest.site.name}}</div>

I want this method to work <div ng-bind="sel.texte"></div>. Maybe it is <div ng-bind="sel.vm.texte"></div>?

I remember of something like console.log(blabla) but I think it is useless.

I succeed to do it with the system of "$scope" but I have erased this program and I can’t remember what I have written down :S

what exactly are you trying to show in ng-bind="sel.texte", whole object ?? — macrog
– macrog, Commented Sep 14, 2015 at 9:56
I try to display A if you choose A, B if you choose B and nothing if you choose nothing. — Chènevis
– Chènevis, Commented Sep 14, 2015 at 10:01
but your sel.selectedRequest.site.name is showing exactly this — macrog
– macrog, Commented Sep 14, 2015 at 10:04
Yes but the value is not put in a variable of my controller. I want to show the result only to verify what contains these expressions. But I will do something else with the variable which contains the value. — Chènevis
– Chènevis, Commented Sep 14, 2015 at 10:05
@Carapatte you can directly use $scope.sel.selectedRequest.site.name from your controller. ng-model will work for you :) — Vineet
– Vineet, Commented Sep 14, 2015 at 10:09

JavierFromMadrid · Accepted Answer · 2015-09-14 10:08:59Z

2

$scope object, as its names says, it's an object on which you should store all other objects you will use on "view" (on your case, html file). As Angular has data binding, it's enough with change dinamicaly any value on $scope and change will be reflexed on your view (html file).

So, here you have a cleaner version of your code use $scope object (and the name of the selected site is displayed):

index.html

<html ng-app="kibana.controllers">
    <head>
        <meta charset="UTF-8">
        <title>Log Stack Manager</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
        <script src="app.module.js"></script>
        <script src="script.js"></script>
        <!-- <script src="app/services/dashboard.js"></script> -->
    </head>

    <body>
        <div class="lateral_panel" ng-controller="selectCtrl">
            <h1>MENU LSM</h1>
            <h3>Sites: </h3>
            <div class="styled-select">
                <select name="site" ng-model="selectedRequest" ng-options="site.name for site in option" ng-change="update()">
                </select>
            </div>
                <br/><br/>

            <div ng-bind="texte.name"></div>
            <!-- <div>{{sel.selectedRequest.site.name}}</div> -->

                <br/><br/>
            <text1>Chose: </text1>
            <h4>{{selectedRequest.name}}</h4>
            <div ng-show="selectedRequest && selectedRequest.id != 0 " >
                <text2>Contains:</text2>
                <br>
                <h4 ng-repeat="country in selectedRequest.countries">{{country.name}}</h4>
                <br>
                <text3>and:</text3>
                <h4 ng-repeat="server in selectedRequest.servers">{{server.name}}</h4>
            </div>          
        </div>

        <div>
            <form action="index.html">
                <input type="submit" name="OK" value="OK" id="ok">
            </form>
        </div>
    </body>
</html>

script.js

(function(angular) {
    'use strict';
var module = angular.module('kibana.controllers');

        module.controller('selectCtrl', function ($scope, $http){
        //option will be an array wich stores all available options
            $scope.option = [
            {id: 0, name: ""},
            {id: 1, name: "A", 
                countries: [{id: 1, name: "FR" }],
                servers: [{id: 1, name: "1"}, 
                {id: 2, name: "2"},
                {id: 3, name: "3"}]
            },
             {id: 2, name: "B",
                countries: [{id: 1, name: "FR"},{id:2, name: "DE"}],
                servers: [{id: 1, name: "4"}, 
                    {id: 2, name: "5"}, 
                    {id: 3, name: "6"}, 
                    {id: 4, name: "7"}, 
                    {id: 5, name: "8"},
                    {id: 6, name: "9"}]
              }

            ];
      //just store selected option
            $scope.selectedRequest = $scope.option[0];
            $scope.showMessage = true;

      //we store on texte the selected option
            $scope.update = function () {
                $scope.texte = $scope.selectedRequest;
            }

            // vm.selectedRequest = dashboard;

        });


})(angular);

answered Sep 14, 2015 at 10:08

JavierFromMadrid

6219 silver badges21 bronze badges

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

7 Comments

Chènevis Over a year ago

So you are saying that the key-word "this" cannot do the work? Because, in this article github.com/johnpapa/angular-styleguide it is depreciated to use "$scope".

JavierFromMadrid Over a year ago

No, I have never seen that recomendattion, but it is a good tip ;-)

Chènevis Over a year ago

I have change all my vm in $scope but my browser show me [object Object]

JavierFromMadrid Over a year ago

Change that line for <div ng-bind="texte.name"></div>

Chènevis Over a year ago

Nope, nothing have changed…

|

Diana R · Accepted Answer · 2015-09-14 10:44:15Z

1

Beside what was mentioned by @Javier Plá Herrero, there are a few other things that can be improved in your code:

1- {id: 0, name: ""}, is obsolet because by default select will already have an empty option displayed

2- $scope.selectedRequest = $scope.option[0]; is also obsolet as long as empty option created by angularjs will by default be selected

3 - update function can be doen directly in html using ng-change="texte =selectedRequest"

edited Sep 14, 2015 at 10:44

answered Sep 14, 2015 at 10:19

Diana R

1,1741 gold badge9 silver badges24 bronze badges

7 Comments

Chènevis Over a year ago

Ok for the point one and two, but for the last, would it be a variable stocked in my controller which will get it ?

Diana R Over a year ago

@Carapatte yes, the variable texte mentioned in ng-change can be accesed in controller via $scope.texte

Chènevis Over a year ago

Excuse me, but I don’t really understand. I have to write $scope.texte = texte; ?

Diana R Over a year ago

No. You just change ng-change="update()" into ng-change="texte =selectedRequest", remove the update function from controller and it will work as you expect, given that you also applied the changes mentioned by @Javier Plá Herrero.

Chènevis Over a year ago

About to have a variable containing the value of texte and which is stocked in my controller. Does the $scope.texte will contain the value of texte?

|

Collectives™ on Stack Overflow

Update controller from the view

2 Answers 2

7 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related