我试图从3个按钮添加/删除calss,由于某种原因,它有时需要多次点击才能工作
<a class="button small">
<i class="icon-circle-arrow-up" ng-click="select('slide')" ng-class="{active: 'slide' == selected}"></i>
</a>
<a class="button small">
<i class="icon-resize-horizontal" ng-click="select('wave')" ng-class="{active: 'wave' == selected}"></i>
</a>
<a class="button small">
<i class="icon-repeat" ng-click="select('role')" ng-class="{active: 'role' == selected}"></i>
</a>
javascript:
myApp.controller("TodoCtrl", function($scope, $http) {
$scope.slide = "one";
$scope.animate = "slide";
$scope.selected = "slide";
return $scope.select = function(item) {
$scope.selected = item;
return $scope.animate = item;
};
});
plunkr:
我正在使用Express(即Jade)和Angular构建一个小型rss阅读器.我有一个下拉菜单,其中菜单项由模型中的项目列表填充.无论用户选择什么项目,都会附加一个RSS网址,它应该触发工厂.这是玉的部分:
div.btn-group
button.btn.btn-info(type='button') {{loadButtonText}}
button.btn.btn-info.dropdown-toggle(data-toggle='dropdown')
span.caret
span.sr-only Toggle Dropdown
ul.dropdown-menu(role='menu')
li(ng-repeat='rss in RSSList')
a(href='#', ng-click="feedSrc='{{rss.url}}';loadFeed($event);") {{rss.Title}}
input.form-control(type='text', autocomplete='off', placeholder="This is where your feed's url will appear" data-ng-model='feedSrc')
这是我的角度控制器:
var News = angular.module('myApp', []);
News.controller('FeedCtrl', ['$scope','FeedService', function($scope, Feed){
$scope.loadButtonText = 'Choose News Feed';
$scope.RSSList = [
{Title: "CNN", url: 'http://rss.cnn.com/rss/cnn_topstories.rss'},
{Title: "Reuters", url: 'http://feeds.reuters.com/news/usmarkets'}
];
$scope.loadFeed = function (e) {
Feed.parseFeed($scope.feedSrc).then(function (res) {
$scope.loadButtonText=angular.element(e.target).text();
$scope.feeds = res.data.responseData.feed.entries;
}); }}]);
News.factory('FeedService', ['$http', function($http){
return {parseFeed: function (url){
return $http.jsonp('//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=50&callback=JSON_CALLBACK&q='+encodeURIComponent(url));}}
}]);
似乎ng-click中的feedSrc不捕获rss.url,不能作为参数传递给parseFeed函数.我试图直接将rss.url传递给loadFeed,就像这样ng-click="loadFeed({{rss.url}});" …
我正在尝试构建一个 Angular JS 表单。我希望用户能够在单击按钮时将焦点设置在文本字段上。不知道为什么这不起作用？谢谢
html：
<div ng-app="" ng-controller="personController">
<p>Name: <input type="text" ng-model="name" id="question1" focus="{{focusThis}}"></p>
<p ng-bind="name"></p>
<input type="button" value="focus" ng-click="focus()">
</div>
角JS功能：
function personController($scope)
{$scope.focus=function(){
$scope.focusThis="true";
};
};
我试图用我的AngularJS控制器调用一个函数,代码如下:
控制器代码
(function () {
var hello = angular.module("helloApp", []);
hello.controller("HelloCtrl", ["$http", "$scope", function($scope, $http) {
console.log("in controller");
$scope.test = function() {
console.log("in test function");
$http.get("/test").success(function(data) {
console.log("success");
})
.error(function(data) {
console.log("error");
});
};
} ]);
})();
HTML
<!DOCTYPE html>
<html ng-app="helloApp">
<head>
...
</head>
<body ng-controller="HelloCtrl">
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" ng-click="test()">Search</button>
</div>
</div>
</form>
</div>
...
</body>
当我启动应用程序时,我看到了消息"in controller",正如我所料.但是,如果我单击提交按钮,那么我看不到任何其他三个控制台消息.
我错过了什么？
我想要一个下拉列表来更改我的网站显示的语言,所以我目前有:
<select ng-controller="langCtrl">
<option ng-click="switchLanguage('en')" value="en">EN</option>
<option ng-click="switchLanguage('de')" value="de">DE</option>
<option ng-click="switchLanguage('it')" value="it">IT</option>
<option ng-click="switchLanguage('fr')" value="fr">FR</option>
<option ng-click="switchLanguage('es')" value="es">ES</option>
</select>
但是由于某些原因,这些ng-click似乎并没有调用指定的函数.我将它们全部更改为按钮,这似乎工作正常,但我想要一个下拉列表,而不是按钮.谁能告诉我为什么这不起作用？
控制器代码:
app.controller('langCtrl', function($translate, $location, $scope) {
$scope.switchLanguage = function (langKey) {
switch(langKey) {
case 'en':
$location.url('/#en');
break;
case 'de':
$location.url('/#de');
break;
case 'it':
$location.url('/#it');
break;
case 'fr':
$location.url('/#fr');
break;
case 'es':
$location.url('/#es');
break;
default:
$location.url('/#en');
}
$translate.use(langKey);
};
});
我在同一页面上有以下表格：
<form ng-submit="actionA()">
<input type="text">
<input type="submit" value="Submit">
</form>
<form ng-submit="actionB()">
<input type="text">
<input type="submit" value="Submit">
</form>
目前，当我提交任一表单时，页面会重新加载。我该如何防止？我知道我可以使用 event.preventDefault() 但我想知道是否有一个简单的 Angular 解决方案。
我正在尝试使用它ng-if来打开和关闭.
我只能将值设置true为显示孩子,但我无法将值设置回false.
这是我的代码:
var app = angular.module('plunker', []);
var array = [{'name':'one'}, {'name':'two'}, {'name':'three'}];
app.controller('MainCtrl', function($scope) {
$scope.names = array;
$scope.showChild = function ( obj ) {
obj.show = true;
}
$scope.closeChild = function ( n ) {
n.show = false;
}
});
HTML:
<ul>
<li ng-repeat="n in names" ng-click="showChild(n)">
{{n.name}}
<h2 ng-if="n.show">
{{n.name | uppercase }}
</h2>
<span ng-click="closeChild(n)">
Close
</span>
</li>
</ul>
javascript events event-propagation angularjs angularjs-ng-click
ng-click我没什么问题.
我的代码是这样的:
<div ng-click="changeVal()">
content
<span ng-click="changeColor()">content</span>
</div>
当然现在当我单击span angle trigger两次单击(val和color)时.但我想只触发一次(changeColor).
我不能在div中添加另一个元素来填充整个div,因为我使用的模板不允许这样做.
当我点击div的背景时,是否有一种触发ng-click的方法？
我在尝试使用ng-click列表内部时遇到问题,该列表是另一个包含ng-click事件的列表的子列表.以下是我的代码
<ul>
<li
ng-repeat="facet in node.Facets"
ng-click="updateNav(facet.Action)"
ng-cloak
>
{{facet.DisplayValue}}
<ul>
<li ng-repeat="sub in facet.Refinements.Nodes[0].Facets"
ng-click="updateSubNav(sub.Action)"
>
{{sub.DisplayValue}}
</li>
</ul>
</li>
</ul>
我遇到的问题是,当我点击updateSubNav它时会自动触发updateNav.如何防止触发updateNav当我点击updateSubNav(因为我希望这两种方法独立工作？
我试图在单击地图按钮时更新某些数据,但ng-click功能似乎不起作用.以下是我的代码.
<textarea id="xmltest" class="form-control" style="margin-top:2%; width: 60%;" rows="10" >
Resulting definition:<![CDATA[<?xml version='1.0' encoding='UTF-8'?>
<ColumnMapping>
{{result}}
<mapping targetIndex='0' sourceIndex='0' dataType='String' businessKey='1' alias='Practice'/>
<mapping targetIndex='1' sourceIndex='1' dataType='String' businessKey='0' alias='Client_Name'/>
</ColumnMapping>
]]>
</textarea>
<a style="margin-top: 10%;margin-right: -70%" href="#" class="btn btn-primary" ng-click="mapFields()" id="MappingFields">Map</a>
<script type="text/javascript">
mapFields = function($scope){
$scope.result= "Code works";
};
</script>
</body>
当我点击地图按钮时,没有任何反应.没有错误也显示出来.对此有任何帮助非常感谢.提前致谢
angularjs ×10
javascript ×5
class ×1
events ×1
focus ×1
html ×1
html-select ×1
jquery ×1
ng-submit ×1