CODEWITHSUNDEEP
angularjs
Chènevis
Chènevis

Reputation: 513

Update controller from the view

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

Upvotes: 0

Views: 57

Answers (2)

Diana R
Diana R

Reputation: 1174

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"

Upvotes: 1

JavierFromMadrid
JavierFromMadrid

Reputation: 621

$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);

Upvotes: 2

Related Questions