javascript - AngularJS: Why won't ng-click set a variable as a value obtained from ng-repeat? - Stack Overflow

admin管理员组

文章数量:1360170

I'm trying to give an app the ability to set the font for portion of text based on a list of fonts from Google Fonts.

Here's what I have:

<ul ng-init='headerFont="mono"'>
  <li ng-repeat='font in fonts' style='font-family: {{font}};' ng-click='headerFont = font'>{{font}}
  </li>
</ul>

and then later on:

<h1 style='font-family: {{headerFont}};'>Header</h1>

and in the controller in my js file:

$scope.fonts = [...an array of font names...]

Originally, instead of ng-repeat on <li>, I was using:

<select ng-model='headerFont' style='font-family: {{headerFont}};'>
  <option ng-repeat='font in fonts' style='font-family:{{font}};'>{{font}}
  </option>
</select>

And that worked exactly like I wanted it to. But I wanted to try using a scrollable list instead of a drop-down menu because the <select> menu on mobile browsers doesn't support changing fonts of individual options, and it's important to me for the fonts to be able to be previewed before choosing. I figured I could just use ng-click to set the value of headerFont, but it doesn't do anything (no errors show up in the console or anything. Just nothing happens.) Does anyone know why?

I'm trying to give an app the ability to set the font for portion of text based on a list of fonts from Google Fonts.

Here's what I have:

<ul ng-init='headerFont="mono"'>
  <li ng-repeat='font in fonts' style='font-family: {{font}};' ng-click='headerFont = font'>{{font}}
  </li>
</ul>

and then later on:

<h1 style='font-family: {{headerFont}};'>Header</h1>

and in the controller in my js file:

$scope.fonts = [...an array of font names...]

Originally, instead of ng-repeat on <li>, I was using:

<select ng-model='headerFont' style='font-family: {{headerFont}};'>
  <option ng-repeat='font in fonts' style='font-family:{{font}};'>{{font}}
  </option>
</select>

And that worked exactly like I wanted it to. But I wanted to try using a scrollable list instead of a drop-down menu because the <select> menu on mobile browsers doesn't support changing fonts of individual options, and it's important to me for the fonts to be able to be previewed before choosing. I figured I could just use ng-click to set the value of headerFont, but it doesn't do anything (no errors show up in the console or anything. Just nothing happens.) Does anyone know why?

• javascript
• angularjs

Share Improve this question Follow asked Jul 26, 2015 at 7:37 NathanNathan 2,38733 gold badges1717 silver badges1919 bronze badges 1

• 2 It would be much easier if you could provide a jsFiddle or plunkr or something with your question. Anyway I think you can use ng-style directive and don't use statements in your declarative code (HTML), instead make that one line of code a method in your controller, it would be much easier to debug or follow later. – Kia Raad Commented Jul 26, 2015 at 7:44

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

The problem is that ngRepeat creates child scope for each iteration, so ngClick actually changes local child headerFont variable.

One possible solution is to explicitly refer parent scope:

var app = angular.module('demo', []);
app.controller('demoController', function($scope) {
    $scope.fonts = ['Arial', 'Times New Roman', 'Verdana', 'mono'];
})

<script data-require="[email protected]" src="https://code.angularjs/1.4.3/angular.js" data-semver="1.4.3"></script>

<div ng-app="demo" ng-controller="demoController">
    <h1 style='font-family: {{headerFont}};'>Header</h1>

    <ul ng-init='headerFont="mono"'>
        <li ng-repeat='font in fonts' style='font-family: {{font}};' ng-click='$parent.headerFont = font'>{{font}}</li>
    </ul>
</div>

Each ng-repeat creates a new scope. The ng-click changes the headerFont in its own scope, without touching the headerFont on the top level.

You can create dictionary at the top level to prevent the child scope from kicking in:

<ul ng-init="top = {'headerFont':'mono'}">
 <li ng-repeat='font in fonts' 
     style='font-family: {{font}};' 
     ng-click='top.headerFont = font'>
   {{font}} / {{top.headerFont}}
  </li>
</ul>

Demo: http://plnkr.co/edit/77zesZsBgYpZUDWciY18?p=preview

本文标签： javascriptAngularJS Why won39t ngclick set a variable as a value obtained from ngrepeatStack Overflow