2016-02-26 90 views
1

我刚碰到一个简单的角度问题。 我有一个占位符“用户名”的输入字段。 如果选择了用户并因此在$ rootScope中可用,则会显示ng模型。角度ng模型从rootScope输入

到目前为止是这种情况...

input type="text" placeholder="Username..." ng-model="user.name + user.id"/> 

电流输出的视图:

Username12 

我想输出是:

Username (12) 

有谁知道如何实现这是吗?

在此先感谢!

回答

1

因为你很可能希望做一些与<input>元素的值(以其它方式使用不同的只读方式),ng-model应代表一个简单的变量名称(不计算/连接)。

要这样做,您应该使用$watch('user', ...生成更新的<input>值,每次更改对象user

HTML

<body ng-controller="MainCtrl"> 
    <input type="text" placeholder="Username..." ng-model="userInput" /> 
</body> 

的JavaScript

app.controller('MainCtrl', function($scope) { 
    $scope.user = { 
    name: "Marc", 
    id: 1 
    }; 

    $scope.userInput = ''; 

    // ... 

    $scope.$watch('user', function(user){ 
    $scope.userInput = user.name + ' (' + user.id + ')'; 
    }); 

}); 

在线演示

https://plnkr.co/edit/DqjFIiiU8EJmHWUhJdGl?p=preview

+0

谢谢!像魅力一样工作! – MarcJohnson

0

如果您想要数据绑定,请使用ng-model。

它看起来在这里,你只是想打印(而不是更新)这些值。

然后,我会建议只使用一个简单的html标签打印,而不是在输入中包装数据(以错误的方式)。

你可以例如像做一个正常的任何HTML元素上结合:

<span ng-bind="user.name"></span>(<span ng-bind="user.id"></span>)