我做了一个plunker演示(点击按钮,观察输入框保持不变)
标记:
<body ng-controller="Ctrl">
<input type="text" id="input" name="input" ng-model="myValue" test>
<p translate="VARIABLE_REPLACEMENT" translate-values="{{ 'translationData' }}"></p>
<p ng-bind-html="alink"></p>
</body>
角度的东西:
var translations = {
VARIABLE_REPLACEMENT: 'Hi, {{name}}'
};
var app = angular.module('myApp', ['pascalprecht.translate', 'ngSanitize']);
app.config(['$translateProvider', function ($translateProvider) {
// add translation table
$translateProvider.translations(translations);
}]);
app.controller('Ctrl', ['$scope', '$sce', function ($scope, $sce) {
$scope.translationData = { name: 'foo'};
$scope.setValue = function(value) {
$scope.myValue = value;
};
}]);
app.directive('test', ['$translate', '$sce', function ($translate, $sce) {
return { …我想做一些我不知道是否可能的事情
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>
// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions = { data: 'myData',
cellTemplate:'<div class="ngCellText" …在页面加载时,我有一个调用服务的控制器,然后将返回的数据绑定到某些$ scope.objects:
app.controller("MainController", function($scope, $http, serviceGetData) {
serviceGetData.getData(function(data) {
$scope.LoginCount = data.LoginCount;
$scope.ProductInfo = data.ProductInfo;
$scope.ProfileInfo = data.ProfileInfo;
// Delayed binding
$scope.OrderHistory = { History: [] };
}
$scope.populateModel = function(model, values) {
var isArray = $.isArray(values);
$.each(values, function(key, value) {
if (isArray) {
key = this.key;
value = this.value;
}
if (model[key] !== value) {
model[key] = value;
}
});
};
}
在我的HTML中,我尝试通过以下方式绑定$ scope.OrderHistory:
<h1><a href="#" ng-click="populateModel(OrderHistory , { History: OrderEntries })" >View order details</a></h1>
这在笔记本电脑/台式机上观看时很好,但在平板电脑和移动设备(如iphone/ipad)中无法正常工作
我在mycontroller中有这个代码我会将它添加html()到我的html中,所有这一切只是ng-click dos不起作用!你有一个想法为什么ng-click dos不起作用
var html='<div ng-click="selectedValue('+Value+')">Value</div>' ;
$('#myDiv').html(html);
$scope.selectedValue = function(value){
$scope.val =value;
};
我必须使用ng-click函数selectedValue选择div中显示的值
在我的AngularJS项目中,我有类似的东西(这是一个带有客户名称的下拉菜单.点击其中一个名称后,Scrum Card应该出现,并在卡中插入客户的名字.):
<ul class="dropdown-menu red" >
<li ng-repeat="customer in customers" ng-click="addCard()">
// HERE GOES THE HTML CODE
</li>
</ul>
我想要完成每次点击都会插入一张卡片.现在的问题是,这张卡有多行HTML代码.所以最好插入一个全新的模板.但是我不能用ng-click插入模板,对吗？除此之外,将HTML放入变量并将其推送到此列表非常脏,不是吗？
所以,我考虑过在Coffeescript中创建一个Card Class,并在每次点击时创建一个实例.使用我的HTML模板/部分点击创建此类有什么好处？如何告诉Angular创建我的类卡的新实例？
(在此之前我创建了一个具有templateURL属性和我的部分的指令.但同样的问题:我想在ng-click上注入我的指令而不是通过在代码中包含我的指令手动... btw,我是一个Angular和CoffeeScript初学者...)
非常感谢你提前!
coffeescript angularjs angularjs-directive angularjs-ng-repeat angularjs-ng-click
我有以下表格:
<form name="formuser" action='/signup' method='post' novalidate>
<input type="text" name="firstname" ng-model="firstname" ng-class="{ 'has-error' : (formuser.firstname.$invalid && !formuser.firstname.$pristine) || hasSubmitted}" required />
<button type="submit" ng-disabled="formuser.$invalid" ng-click="hasSubmitted=true">Submit</button>
</form>
我正在尝试将输入字段中的"has-error"类添加到用户输入内容之后无效,或者在输入仍处于原始状态时点击提交按钮.我已经在提交按钮中添加了ng-disabled以禁用表单子项,但我仍然希望触发ng-click以更改hasSubmitted范围.问题是按钮上的ng-disable也禁用了ng-click.
我知道我总是可以在表单上使用ng-submit,在我的控制器中进行验证,然后激活ajax请求,但我的身份验证框架要求我实际提交表单并重定向浏览器.
基本上我希望我的应用程序在用户按住Ctrl(在Linux窗口上),Cmd(在OSX上)时在新选项卡/页面中打开链接.什么是路要走.
注意:我无法摆脱ng-click.应用程序在范围内使用它进行各种方法调用.
<ul>
<li data-ng-repeat="image in images" data-ng-click="toggle = !toggle" data-ng-init="toggle=false">
<img data-ng-class="{'active' : toggle}" src="" />
</li>
</ul>
'active'类的CSS来自bootstrap.
所以切换工作,这几乎是我想要的; 我希望它类似于导航链接中的活动状态,除了在我的示例中它处理图像所以需要担心url字符串等.
我试着模仿这个在这里找到的例子无效(我为图像尝试了相同的逻辑):ng-class突出显示基于ng-repeat的活动菜单项.AngularJS
如果有人能指出我正确的方向,我将非常感激.:d
我是Ionic和AugularJS的新手,我在设置页面中点击第三个选项上的复选框/单选按钮打开模式框时遇到问题.我已经包括ng-controller并ng-click采取行动.我查看了调试器并显示错误:
GET http://localhost:8100/hashtag-modal [HTTP/1.1 404 Not Found 1ms]
我知道404 Not Found意味着它没有找到templateUrl但我的每个导航页面都在index.html中,除了hashtag-modal.html在app.js文件中它们工作正常.为什么它不起作用,我该如何解决这个问题？
app.js
// Navigation pages
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('index', {
url: '/index',
templateUrl: 'index.html'
})
.state('about', {
url: '/about',
templateUrl: 'about.html'
})
.state('settings', {
url: '/settings',
templateUrl: 'settings.html'
})
.state('hashtag-modal', {
url: '/hashtag-modal',
templateUrl: 'hashtag-modal',
controller: 'hashtag-modalCtrl'
})
$urlRouterProvider.otherwise("/index"); // if no url found, go back to index
})
// Hashtag Search option
app.controller('hashtagController', ['$scope', function($scope)
{
$scope.hashtagValue = 'Search'; // …angularjs ×10
angular-ui ×1
coffeescript ×1
data-binding ×1
events ×1
forms ×1
javascript ×1
ng-class ×1
ng-grid ×1
translation ×1
validation ×1