2016-02-26 75 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>)