标签: ng-controller
如何在控制器中使用过滤器？
我编写了一个过滤函数,它将根据您传递的参数返回数据.我想在我的控制器中使用相同的功能.是否可以在控制器中重用过滤器功能？
这是我到目前为止所尝试的:
function myCtrl($scope,filter1)
{
// i simply used the filter function name, it is not working.
}
推荐指数
解决办法
查看次数
Angularjs:'控制器作为语法'和$ watch
使用controller as语法时如何订阅属性更改？
controller('TestCtrl', function ($scope) {
this.name = 'Max';
this.changeName = function () {
this.name = new Date();
}
// not working
$scope.$watch("name",function(value){
console.log(value)
});
});
<div ng-controller="TestCtrl as test">
<input type="text" ng-model="test.name" />
<a ng-click="test.changeName()" href="#">Change Name</a>
</div>
推荐指数
解决办法
查看次数
AngularJS - 在控制器中转换日期
任何人都可以建议我如何将日期从这种1387843200000格式转换为24/12/2013 我的控制器内的？
仅供参考,我的日期以这种方式存储,当绑定到带有input type="date"字段的编辑表单时,根本没有填充.
EditCtrl
app.controller("EditCtrl", [ "$scope", "$filter", "db" function ($scope, $filter, db){
// this gets me an item object
var item = db.readItem();
// item date = 1387843200000
// this returns undefined
item.date = $filter('date')(date[ item.date, "dd/MM/yyyy"]);
}]);
Edit.html - 模板
<form name="editForm" class="form-validate">
<div class="form-group">
<label for="date">Event date.</label>
<input type="date" class="form-control" ng-model="event.date" id="date" required />
</div>
<a href="#/" class="btn btn-danger ">Cancel</a>
<button id="addEvent" class="btn btn-primary pull-right" ng-disabled="isClean() || editForm.$invalid" ng-click="saveEvent()">Save …推荐指数
解决办法
查看次数
将AngularJS范围变量从指令传递给控制器的最简单方法？
将AngularJS范围变量从指令传递给控制器的最简单方法是什么？我见过的所有例子看起来都很复杂,是不是我可以从指令访问控制器,并设置其中一个范围变量？
推荐指数
解决办法
查看次数
如何基于条件实例化ng-controller
我问过这个问题,但我提出的具体问题发生了巨大变化.
我有一段代码:
<div ng-attr-controller="{{pings || 'PingsCtrl as pings' }}">
<h1 ng-click="pings.press()">asdf</h1>
</div>
此代码注入两个html页面.一页已经调用PingsCtrl.另一个没有.我真的想保持这段代码DRY,我只想要一个上面的代码参考.
我如何编写上面的代码来生成ng-controllerif PingsCtrl尚未实例化.
这是两个html页面.
HTML
// First page
<html ng-app="coolApp">
<div ng-controller="PingsCtrl as pings">
<div ng-attr-controller="{{pings || 'PingsCtrl as pings' }}">
<h1 ng-click="pings.press()">asdf</h1>
</div>
</div>
</html>
// Second page
<html ng-app="coolApp">
<div ng-attr-controller="{{pings || 'PingsCtrl as pings' }}">
<h1 ng-click="pings.press()">asdf</h1>
</div>
</html>
Javascript在这里:
angular.module('coolApp', [])
.controller('PingsCtrl', function() {
var vm = this;
vm.press = function() {alert(123)};
})
怎么了,怎么解决这个问题？
推荐指数
解决办法
查看次数
如何使用大多数常见代码重构angularjs控制器
我对angularjs比较新.我有一些代码(HTML + JS)允许用户添加和删除范围内数组中的条目.但是现在我正在大量重复不同数组的代码.我知道这可以重新考虑,但我不确定角度方法,除了我可能想要使用指令的事实.任何帮助非常感谢.
HTML
<div class="control-group" ng-class="{error: form.profile.seeking.$invalid}" ng-controller="SeekingCtrl">
<label class="control-label" for="profile.seeking">Seeking</label>
<div class="controls">
<ul ng-repeat="seeks in profile.seeking">
<li>{{seeks}} <button class="btn" ng-click="removeSeeks()">Remove</button></li>
</ul>
<input type="text" ng-model="newseeks" id="profile.seeking">
<button class="btn" ng-disabled="!newseeks" ng-click="addSeeks()">Add new</button>
</div>
<div class="control-group" ng-class="{error: form.project.offering.$invalid}" ng-controller="OfferingCtrl">
<label class="control-label" for="project.offering">Offering</label>
<div class="controls">
<ul ng-repeat="offer in project.offering">
<li>{{offer}} <button class="btn" ng-click="removeOffer()">Remove</button></li>
</ul>
<input type="text" ng-model="newoffer" id="project.offering">
<button class="btn" ng-disabled="!newoffer" ng-click="addOffer()">Add new</button>
</div>
Javascript
var SeekingCtrl = function($scope) {
$scope.addSeeks = function() {
$scope.profile.seeking = $scope.profile.seeking || [];
$scope.profile.seeking.push($scope.newseeks);
$scope.newseeks = …推荐指数
解决办法
查看次数
用于选项卡的AngularJS控制器
我的页面中有三个选项卡.我正在使用tabset并tab根据Angular Bootstrap Docs.
我设置一个控制器,用于在<div>其具有tabset如
<div ng-controller="Tabs" class="panel panel-default" id="tabs-panel">
<tabset class="panel-body">
<tab heading="Tab 1"> </tab>
<tab heading="Tab 2"> </tab>
<tab heading="Tab 3"> </tab>
</tabset>
</div>
相应的页面是 
但是,当我尝试为我的第二个标签添加另一个控制器时
<div ng-controller="Tabs" class="panel panel-default" id="tabs-panel">
<tabset class="panel-body">
<tab heading="Tab 1"> </tab>
<tab heading="Tab 2" ng-controller="Tab2> </tab>
<tab heading="Tab 3"> </tab>
</tabset>
</div>
我现在发现标题没有显示,我不能再单击Tab2.
这是为什么？如何恢复相同的功能？
这是在现有控制器中添加另一个控制器的正确方法吗？
我的app.js:
var myApp = angular.module('myApp',['ui.bootstrap']);
myApp.controller('Tabs', function ($scope) {
});
myApp.controller('Tab2', function ($scope) {
});
推荐指数
解决办法
查看次数
AngularJS初学者:ng-controller无法正常工作
我只想试着了解AngularJS的基础知识.我尝试编写一个简单的MVC应用程序,但控制器似乎没有工作.该文件可以找到刚找到的有角度的lib,我已经通过排除'ng-controller'进行了测试.
<!DOCTYPE html>
<html ng-app>
<head>
<script src='js/lib/angular.js'></script>
<script>
// controller
function MyFirstCtrl($scope) {
// model
var employees = ['Christopher Grant', 'Monica Grant', 'Christopher
Grant', 'Jennifer Grant'];
$scope.ourEmployees = employees;
}
</script>
</head>
<body ng-controller='MyFirstCtrl'>
<!-- view -->
<h2>Number of employees: {{ourEmployees.length}}</h2>
</body>
</html>
编辑:错误日志说明如下:
Uncaught SyntaxError: Unexpected token ILLEGAL , line 9
Uncaught SyntaxError: Unexpected token { , line 19
Error: [ng:areq] Argument 'MyFirstCtrl' is not a function, got undefined
EDIT2:我把代码更改为:
<!DOCTYPE html>
<html ng-app='MVCExample'>
<head>
<script src='js/lib/angular.js'></script>
<script> …推荐指数
解决办法
查看次数
在bootstrap之后动态地将控制器分配给元素
我有一个AngularJS应用程序,我在时间't'手动引导.在't + 1'时,我想显示一个没有附加ng-controller的HTML元素.我想动态地将ng-controller添加到此元素,以便它可以与我的javascript代码进行通信.
我怎样才能做到这一点？
PS我试图动态地将ng-controller属性添加到元素,但它不起作用.
推荐指数
解决办法
查看次数
从变量值动态设置ng-controller
我正在使用angularJs和nodejs开发应用程序。将控制器的名称设置为来自主控制器的变量的值感到震惊。为了更好地解释它，我的index.html看起来像这样：
<tbody ng-repeat="group in groups">
<tr ng-repeat="member in group.members" >
<td rowspan="{{group.members.length}}" ng-hide="$index>=0">
</td>
<td>{{member.taskName}}</td>
<td><div class={{group.colorMe[0]}}>{{member.env}}</div>
<button class="btn btn-info" ng-controller="member.taskName" ng-click="test( member.taskName , 'env', group.colorMe[0])">Sanity</button>
</td>
我的主控制器如下所示，其中组定义如下：
var tasks =['task1','task2','task3','task4','task5'];
for(i=0;i<tasks.length;i++)
{
var group = {
"id" : i+1,
"members" : [{
"taskName":tasks[i].toUpperCase(),
"env1":versionMap["env1"+tasks[i]],
"env2":versionMap["env2"+tasks[i]],
"env3":versionMap["env3"+tasks[i]]
}]
};
$scope.groups.push(group);
}
现在，当我单击按钮时，应将我定向到特定的控制器，并且该控制器名称需要动态设置为member.taskName。有人可以帮我吗？
javascript node.js angularjs angularjs-ng-repeat ng-controller
推荐指数
解决办法
查看次数
AngularJS：来自单独的.js文件的注册控制器
我是AngularJS的新手，正在使用plnkr.co学习如何使用angular。我在注册一个控制器时遇到一些困难，该控制器存储在与模块初始化位置不同的.js文件中。谁能告诉我以下原因为何不起作用？
index.html文件
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js" data-semver="1.4.6"></script>
<script src="app.js"></script>
<script scr="mainCtrl.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
</body>
</html>app.js文件
angular.module('plunker', []);mainCtrl.js文件
angular.module('plunker')
.controller('MainCtrl', ['$scope', function($scope) {
$scope.name = 'GitHub';
}]);对我来说，这产生一个参数'MainCtrl'不是一个函数，未定义。
推荐指数
解决办法
查看次数
Angular JS控制器调用两次(ng-controller)
我正在开发一个离子应用程序,当使用angular登录我的控制器被调用两次时,我已经查看了所有其他类似的问题,但没有找到解决方案.
问题是,当我删除ng-controller="LoginCtrl as lgnCtrl"
我得到我的控制器一次调用但没有双向数据绑定.
这是我的路线档案:
$stateProvider
.state('login', {
url: "/login",
views: {
'main': {
templateUrl: "app/user/loginView.html",
controller: "LoginCtrl",
controllerAs: "lgnCtrl"
}
}
})
$urlRouterProvider.otherwise('/login');
这是我的控制器
angular.module('starter.controllers')
.controller('LoginCtrl', LoginCtrl);
function LoginCtrl($state, $storage, $translate, $ionicPopup, LoginService, messageService) {
var lgnCtrl = this;
console.log("user dash 1zz");
return lgnCtrl;
}
这是我的观点:loginView.html:
<ion-view view-title="loginView" id="signinBlk">
<ion-content>
<div class="list list col span_1_of_2 " ng-controller="LoginCtrl as lgnCtrl">
</div>
</ion-content>
</ion-view>
index.html的:
<body ng-app="starter">
<ion-nav-view name="main"></ion-nav-view>
</body>
javascript angularjs angular-ui-router ionic-framework ng-controller
推荐指数
解决办法
查看次数
使用AngularJS在下拉列表中按选定值启用/禁用按钮
我有一个名为test的按钮和一个带有三个值的下拉菜单.如何根据下拉菜单中选择的值启用 - 禁用"测试"按钮.例如.如果选择"未就绪",则应禁用按钮如果选择就绪或注意,则应启用按钮
<div class="row">
<div>
<button id="testBtn" class="btn btn-default" >Test</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<select name="select">
<option value="value1" selected>Not ready</option>
<option value="value2">Ready</option>
<option value="value3">Attention !!</option>
</select>
</div>
</div>
html angularjs angularjs-directive angularjs-scope ng-controller
推荐指数
解决办法
查看次数
标签 统计
angularjs ×13
ng-controller ×13
javascript ×7
date ×1
datetime ×1
html ×1
node.js ×1
refactoring ×1
tabs ×1