所以我只是从角度JS开始,在处理数组时对ng-repeat有点困惑.下面的代码不能正常工作......但是当我将dayNames更改为一个对象并给它键值对时,它没问题.
var myApp = angular.module('exampleApp', []);
myApp.controller("dayCtrl",function($scope){
$scope.dayNames = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "sunday", "monday", "tuesday", "wednesday", "thursday", "friday"];
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
<script src="angular.js"></script>
<script src="controller.js"></script>
</head>
<body ng-controller="dayCtrl">
<h2>Hello, these are the days of the week</h2>
<ul>
<li ng-repeat="day in dayNames">{{day}}</li>
</ul>
</body>
</html>我正在创建一个响应式网站。我设置了一个媒体查询，以便当屏幕宽度低于 768 像素时隐藏一个类（我们称之为“hiddenClass”）。然后我实现 Javascript 以在单击按钮时将此类切换到视图中。我遇到的问题是 javascript 似乎覆盖了媒体查询。因此，如果我将屏幕缩小到 768 像素以下，“hiddenClass”就会消失......然后我单击显示“hiddenClass”的按钮......然后再次单击该按钮以再次将其隐藏在较小的设备上...... ..现在我展开窗口，即使“hiddenClass”达到 768px 也保持隐藏状态。如果我取出 javascript 并缩小窗口，“hiddenClass”的表现就像它应该的那样......这告诉我 javascript 正在覆盖它。
是否有针对此的 CSS 修复？我知道我总是可以在 javascript 中检查窗口调整大小事件，以在达到 768px 后显示 hiddenClass。只是想知道这是否可以用 CSS 处理……或者 javascript 是否可以解决它。
用注释掉的 JS 更新 JSfiddle，以便您可以看到它应该如何工作...然后添加 JS 以查看上述问题。当您缩小屏幕时，按钮是“菜单”导航元素，“hiddenClass”将是 li 中的“菜单”类：
http://jsfiddle.net/or5vy17L/1/
HTML：
<ul>
<li class="menuButton">- Menu -</li>
<a href="index.html">
<li class="menu" >
Home
</li>
</a>
<a href="instagram.html">
<li class="menu" >
Instagram
</li>
</a>
<li class="menu">Clients</li>
<li class="menu">Nutrition</li>
<li class="menu">About Me</li>
<li class="menu">Contact</li>
</ul>
css：
li {
display:inline;
color:$font-color--nav;
cursor:pointer;
font-size:1.5em;
padding: .7em .7em .7em …所以我在ng-repeat中有一个ng-repeat.内部ng-repeat引用"recipe.ingredients中的项目".问题是这些"项目"中的每一个都有特殊字符,除非我使用ng-bind-html,否则它们不会呈现.但是当我尝试使用ng-bind-html时,它不起作用.这是html:
这有效但不能正确显示特殊字符(成分测量的分数):
<div class="row" ng-repeat="recipe in recipes">
<h1 class='title'> {{ recipe.title }} </h1>
<div class="col-md-5">
<div class="list-group">
<div class="list-title">Ingredients</div>
<p class="list-group-item" ng-repeat="item in recipe.ingredients">{{item}}</p>
</div>
</div>
</div>
我尝试使用ng-bind-html(这不起作用):
<div class="row" ng-repeat="recipe in recipes">
<h1 class='title'> {{ recipe.title }} </h1>
<div class="col-md-5">
<div class="list-group">
<div class="list-title">Ingredients</div>
<p class="list-group-item" ng-repeat="item in recipe.ingredients" ng-bind-html="item"></p>
</div>
</div>
</div>
ng-repeat中"item"的示例:
{
id: 1,
img: "images/beefThumbnail.jpg",
title: "Potatoes Supreme",
servings: "Servings: 8 - 10",
ingredients: [
"6 medium potatoes, peeled",
"Salt",
"½ cup butter or margarine, …angularjs ×2
ng-repeat ×2
arrays ×1
css ×1
javascript ×1
media ×1
ng-bind-html ×1
overriding ×1