current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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

share|improve this question
    
Your fiddle isn't setup right, jsfiddle.net/jTu93/3 –  elclanrs Jul 9 at 22:35
add comment

2 Answers

up vote 2 down vote accepted

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';


}
share|improve this answer
    
I think you didn't include the correct fiddle. –  Gerben Rampaart Jul 9 at 22:54
    
That's right. I've updated link –  sylwester Jul 9 at 22:59
    
Out of curiosity, do you know why his jquery change event doesn't fire? I can't really explain it. –  Gerben Rampaart Jul 9 at 23:01
    
Using Jquery inside the controller is considered as bad practice in Angular JS. That all I know :) –  sylwester Jul 9 at 23:11
    
Thanks guys, I'll watch out when mixing the both of them! –  Emmett Harper Jul 10 at 16:05
add comment
up vote 1 down vote

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.