Angular Change Binding Model

Testiram

by Boban Stojanovski

HTML

<div ng-app="testApp">
    <div ng-controller="TestController as vm">

         <h1>CHANGE Binding MODEL</h1>
            
            Bind To
        <select ng-model="vm.bindToValue">
            <option value="people">People</option>
            <option value="animals">Animals</option>
        </select>
         
        <p>{{vm.bindToValue}} List</p>{{vm[vm.bindToValue]}}<br/>
       
         <br/><br/><br/>
         
        Change ng-model Binding to : 
        <select ng-model="vm.bindObject">
            <option value="city" selected="selected">city</option>
            <option value="name">name</option>
        </select>

        </br></br>
           
          {{vm.bindObject == 'city' ? "Menjam Grad" : "Menjam Ime"}}
            
            <input ng-model="vm.data[vm.bindObject]" type="text" /> 
            
             <p><b>VIEW</b></p>
             {{vm.data.city}}
             {{vm.data.name}}
        </div>
</div>

JavaScript

angular.module('testApp', [])
    .controller('TestController', function () {

    var vm = this;

    vm.bindToValue = "people";
    
    vm.bindObject = "city";        
    vm.data = {
        city : "Skopje",
        name: "Bobi"
    };
    //vm.city = "Skopje";
    //vm.name = "Bobi";
    
    vm.people = [{
        fname: "Mo",
        ssn: 123,
        age: 40
    }, {
        fname: "Homer",
        ssn: 456,
        age: 40
    }, {
        fname: "Apu",
        ssn: 888,
        age: 44
    }, {
        fname: "Mr.Burnes",
        ssn: 789,
        age: 50
    }];

    vm.animals = [{
        name: "Santa's Little Helper",
        age: 10
    }, {
        name: "Bear Grillz",
        age: 40
    }, {
        name: "Crazy Dog",
        age: 20
    }];

});