CODEWITHSUNDEEP
javascriptjqueryangularjs
user2872493
user2872493

Reputation:

Scope variable not binding in AngularJS

one of my within scope variables is remaining at 'all'. I am console logging to check if I get the right value and it comes out to ,Steps, Walkthrough, Ref when I select different options, but the type variable remains at all as if I'm not actually changing it with the last line.

here is my html:

<div class="inputs">
    <select class="filters">
        <option ng-model="type" name="Steps" value="all">All<br/>
        <option ng-model="type" name="Steps" value="Steps">Steps<br/>
        <option ng-model="type" name="Steps" value="Walkthrough">Walkthrough<br/>
        <option ng-model="type" name="Steps" value="Ref">Ref<br/>
    </select>
    {{type}}
</div>

And Controller:

$('.filters').change(function() {
    console.log($('option:selected', this).attr('value'));
    $scope.type = $('option:selected', this).attr('value');
});

Attached is a fiddle, but I don't think I got the libraries right or something. in the fiddle where It shows {{type}} as the ouput, that is actually 'all' and never changes. Thanks so much

Working Fiddle

Upvotes: 0

Views: 1543

Answers (2)

Gerben Rampaart
Gerben Rampaart

Reputation: 9945

This works for me:

<div ng-app="MdApp">
    <div ng-controller="MdCtrl">
        <select class="filters" ng-model="type">
         <option ng-model="type" name="Steps" value="all">All</option>
            <option ng-model="type" name="Steps" value="Steps">Steps</option>
            <option ng-model="type" name="Steps" value="Walkthrough">Walkthrough</option>
            <option ng-model="type" name="Steps" value="Ref">Ref</option>
        </select>
        {{type}}
    </div>
</div> 


var app = angular.module('MdApp',[])
    .controller('MdCtrl', function($scope, $attrs) {

    $scope.type = 'all';
});

fiddle

Upvotes: 0

sylwester
sylwester

Reputation: 16498

You don't have to mix jQuery with AngularJS:

Jsfiddle

<div ng-app="MdApp">
    <div ng-controller="MdCtrl">
        <select class="filters" ng-model="type">
         <option ng-model="type" name="Steps" value="all">All</option>
            <option ng-model="type" name="Steps" value="Steps">Steps</option>
            <option ng-model="type" name="Steps" value="Walkthrough">Walkthrough</option>
            <option ng-model="type" name="Steps" value="Ref">Ref</option>
        </select>
        {{type}}
    </div>
</div>  

var app = angular.module('MdApp',[]);
function MdCtrl($scope, $attrs) {

    $scope.type = 'all';


}

Upvotes: 1

Related Questions