Javascript 我可以在ng repeat中设置一个变量吗?
我有一个应用程序,它有两个表单,一个是按钮列表,另一个是标签列表。我选择了一个人,选择了一部电话,在第三张表格中,我显示了一个电话及其相关人员(位置)的列表。是否可以在Javascript 我可以在ng repeat中设置一个变量吗?,javascript,html,angularjs,angularjs-ng-repeat,angularjs-ng-click,Javascript,Html,Angularjs,Angularjs Ng Repeat,Angularjs Ng Click,我有一个应用程序,它有两个表单,一个是按钮列表,另一个是标签列表。我选择了一个人,选择了一部电话,在第三张表格中,我显示了一个电话及其相关人员(位置)的列表。是否可以在ng repeat块内通过ng click设置变量?我尝试将变量_person设置为与按钮文本相等,即{{person},但在下一个表单上打印时_person似乎没有设置为任何值。我也不确定我在第一个中是否正确使用了ng init,是否应该使用ng model <div ng-init="showSelectUser=tru
ng repeat
块内通过ng click
设置变量?我尝试将变量_person设置为与按钮文本相等,即{{person}
,但在下一个表单上打印时_person似乎没有设置为任何值。我也不确定我在第一个
中是否正确使用了ng init
,是否应该使用ng model
<div ng-init="showSelectUser=true; _person=''">
<div class="selectUser" ng-show="showSelectUser">
<h2>Who are you?</h1>
<ul ng-click="showSelectUser=false; showDeviceForm=true;">
<li ng-repeat="person in people">
<a href="#" role="button" ng-click="_person={{person}}">{{person}}</a>
</li>
</ul>
</div>
<div class="selectDevice" ng-show="showDeviceForm" ng-click="showDeviceForm=false; showDeviceList=true">
<p>person: {{_person}}</p>
<h2>Which phone?</h2>
<ul>
<li ng-repeat="device in devices">
<a class="btn btn-default" href="#" role="button" ng-click="device.location=_person">{{device.name}}</a>
</li>
</ul>
</div>
<div class="devicesView" ng-show="showDeviceList">
<ul>
<li ng-repeat="device in devices">
<h3>{{device.name}}</h3>
<h4 class="deviceLocation">{{device.location}}</h4>
</li>
</ul>
</div>
</div>
angular.module('devicesApp')
.controller('MainCtrl', function ($scope) {
$scope.devices = [
{name: 'iPhone 4', location: 'Desk'},
{name: 'iPhone 5', location: 'Desk'},
{name: 'iPhone 6', location: 'Desk'},
];
$scope.people = [
'John',
'Scott',
'Adam'
];
});
你是谁?
-
人:{{{u人}
哪个电话?
-
-
{{device.name}
{{device.location}
角度模块('DeviceApp'))
.controller('MainCtrl',函数($scope){
$scope.devices=[
{name:'iphone4',location:'Desk'},
{name:'iphone5',location:'Desk'},
{name:'iphone6',location:'Desk'},
];
$scope.people=[
“约翰”,
“斯科特”,
“亚当”
];
});
ngRepeat指令创建了一个新的作用域,因此如果您有ng click=“device.location=\u person”
设备,如果它不存在,将在该作用域中创建模型。因此,确保父作用域中已经存在device
,例如在控制器中设置$scope.device={}
\u person
未定义,因为它是在ng repeat=“person in people”
的内部范围内定义的。当前,您的ng click将每个设备位置设置为未定义
一般来说,当在ngClicks中使用表达式而不是执行类似于ng click=“setPerson()”
的操作时,您会遇到很多范围继承问题,并且在控制器中使用$scope.setPerson=function(){…}
请澄清你想做什么,在更高层次的条款,我会更新我的答案
编辑
对我来说,这样的事情看起来更符合逻辑。但是,我认为您将有很多用户体验问题,因为用户在单击列表项之一后无法更改其选择。
请注意,如果将业务逻辑放在JS文件中而不是放在模板中,那么测试就更容易了
<div ng-app="devicesApp" ng-controller="MainCtrl">
<div class="selectUser" ng-show="step === 'step1'">
<h2>Who are you?</h2>
<ul>
<li ng-repeat="person in people">
<a href="#" role="button" ng-click="selectPerson(person)">{{person}}</a>
</li>
</ul>
</div>
<div class="selectDevice" ng-show="step === 'step2'">
<p>person: {{selected.person}}</p>
<h2>Which phone?</h2>
<ul>
<li ng-repeat="device in devices"> <a class="btn btn-default" href="#" role="button" ng-click="selectDevice(device)">{{device.name}}</a>
</li>
</ul>
</div>
<div class="devicesView" ng-show="step === 'step3'">
<ul>
<li ng-repeat="device in devices">
<h3>{{device.name}}</h3>
<h4 class="deviceLocation">{{device.location}}</h4>
</li>
</ul>
</div>
</div>
请参阅。可能重复的感谢Mikey。我使用了一个setPerson函数并使其工作。
angular.module('devicesApp', []).controller('MainCtrl', function ($scope) {
$scope.devices = [{
name: 'iPhone 4',
location: 'Desk'
}, {
name: 'iPhone 5',
location: 'Desk'
}, {
name: 'iPhone 6',
location: 'Desk'
}, ];
$scope.people = [
'John',
'Scott',
'Adam'];
$scope.selected = {};
$scope.step = 'step1';
$scope.selectPerson = function (person) {
$scope.selected.person = person;
$scope.step = 'step2';
};
$scope.selectDevice = function (device) {
device.location = $scope.selected.person;
$scope.step = 'step3';
}
});